2021-04-30 10:28:37 +08:00
|
|
|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_JDGL.aspx.cs" Inherits="FineUIPro.Web.mainMenu_JDGL" %>
|
|
|
|
|
|
|
|
|
|
|
|
<!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>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
.wrap {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
padding: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top-wrap {
|
|
|
|
|
|
height: 100%;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.bw-b-bottom {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bw-b-bottom-up {
|
|
|
|
|
|
border-radius: 0;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
height: 100%;
|
2021-08-13 11:15:59 +08:00
|
|
|
|
margin: 0;
|
|
|
|
|
|
box-shadow: none;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.bottom-wrap {
|
|
|
|
|
|
padding: 0;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.pdtb0 {
|
|
|
|
|
|
padding-top: 0 !important;
|
|
|
|
|
|
padding-bottom: 0 !important;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.tit-center {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 12px;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.tit-one {
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.pdl {
|
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
|
font-size: 12px;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
2021-04-30 10:28:37 +08:00
|
|
|
|
.more {
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.bg-img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
max-height: 225px;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.item {
|
2021-04-30 10:28:37 +08:00
|
|
|
|
margin-bottom: 5px;
|
2021-08-13 11:15:59 +08:00
|
|
|
|
font-size: 10px;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.item:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.item-two {
|
2021-04-30 10:28:37 +08:00
|
|
|
|
margin: 5px 0;
|
|
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.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%;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.tab-wrap-hastit {
|
|
|
|
|
|
position: relative;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
|
|
|
|
|
.tab-wrap-pos {
|
|
|
|
|
|
left: auto;
|
|
|
|
|
|
right: 30px;
|
|
|
|
|
|
top: 5px;
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="wrap flex">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="flex3 flex flexV top-wrap" style="margin-right: 5px;">
|
|
|
|
|
|
<div class="item flex1" style="display: none;">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="tit-one tit-center" style="color: #fff">周计划完成情况统计</div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
<div class="flex1" id='one3' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
|
<div class="flex1" id='one4' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="item-one flex1">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="tit-one pdl" style="color: #fff">进度统计</div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-item-content flex1 pdtb0">
|
2022-12-06 15:36:37 +08:00
|
|
|
|
<div id='four' style="width: 100%; height: 50%;"></div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item flex1">
|
|
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="tit-one tit-center" style="color: #fff">赢得值曲线</div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-item-content flex1 pdtb0">
|
2022-12-06 15:36:37 +08:00
|
|
|
|
<div id='two' style="width: 100%; height: 150%;"></div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="item flex1" style="display: none;">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<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>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-item-content flex1 pdtb0">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div id='three' style="width: 100%; height: 100%;"></div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="flex1 flex flexV" style="display: none;">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item-two flex2" style="display: none;">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="tit-one pdl" style="color: #fff">项目里程碑节点</div>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-item-content flex1 pd10">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<%--<div id='five' style="width: 100%; height: 100%;"></div>--%>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="jd-list">
|
|
|
|
|
|
<div class="jd-item">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<div class="jd-item">
|
|
|
|
|
|
<div class="item">名称2</div>
|
|
|
|
|
|
<div class="item">2020-02-18</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<div class="item-three flex3" style="display: none;">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bw-b-bottom">
|
|
|
|
|
|
<div class="bw-b-bottom-up flex flexV">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<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%;">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bg-img-1"></div>
|
|
|
|
|
|
<%--<img src="../Images/siteProject.jpg" alt="Alternate Text" class="bg-img" />--%>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="more">更多</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">
|
2021-08-13 11:15:59 +08:00
|
|
|
|
function line(id, xArr, data) {
|
2021-04-30 10:28:37 +08:00
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
|
|
var option = {
|
|
|
|
|
|
title: {
|
2021-08-13 11:15:59 +08:00
|
|
|
|
left: 'center',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
text: ' ',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
fontWeight: '300'
|
|
|
|
|
|
},
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
2022-09-14 16:38:27 +08:00
|
|
|
|
formatter: '{a}<br />{b}: {c}'
|
2021-08-13 11:15:59 +08:00
|
|
|
|
},
|
2021-04-30 10:28:37 +08:00
|
|
|
|
legend: {
|
|
|
|
|
|
show: true,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
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)'
|
|
|
|
|
|
},
|
2022-09-14 16:38:27 +08:00
|
|
|
|
//formatter: '{value} %'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
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 =<%=Two %>;
|
|
|
|
|
|
var xArr1 = two.categories
|
2021-08-13 11:15:59 +08:00
|
|
|
|
var data1 = [{
|
2022-09-14 16:38:27 +08:00
|
|
|
|
name: '本月计划工作预算费用-BCWS',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
type: 'bar',
|
|
|
|
|
|
//smooth: true,
|
|
|
|
|
|
data: two.series[0].data,
|
|
|
|
|
|
lineStyle: {
|
2022-09-14 16:38:27 +08:00
|
|
|
|
color: 'rgba(200,201,10, 1)'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
}, {
|
2022-09-14 16:38:27 +08:00
|
|
|
|
name: '本月已完工作预算费用-BCWP',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
type: 'bar',
|
|
|
|
|
|
//smooth: true,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
data: two.series[2].data,
|
|
|
|
|
|
}, {
|
2022-09-14 16:38:27 +08:00
|
|
|
|
name: '本月已完工作实际费用-ACWP',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
//smooth: true,
|
|
|
|
|
|
data: two.series[4].data,
|
|
|
|
|
|
}, {
|
|
|
|
|
|
name: '累计计划工作预算费用-BCWS',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
type: 'line',
|
|
|
|
|
|
//smooth: true,
|
|
|
|
|
|
data: two.series[1].data,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
//color: 'rgba(200,201,10, 1)'
|
|
|
|
|
|
}
|
2021-08-13 11:15:59 +08:00
|
|
|
|
}, {
|
2022-09-14 16:38:27 +08:00
|
|
|
|
name: '累计已完工作预算费用-BCWP',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
type: 'line',
|
|
|
|
|
|
//smooth: true,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
data: two.series[3].data,
|
2022-09-14 16:38:27 +08:00
|
|
|
|
}, {
|
|
|
|
|
|
name: '累计已完工作实际费用-ACWP',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
//smooth: true,
|
|
|
|
|
|
data: two.series[5].data,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(200,201,10, 1)'
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: 'rgba(200,201,10, 1)'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}]
|
|
|
|
|
|
line('two', 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: '300',
|
2021-08-13 11:15:59 +08:00
|
|
|
|
fontSize: 12
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
left: '3%',
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
selectedMode: false,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
textStyle: {//图例文字的样式
|
|
|
|
|
|
color: '#ffffff'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
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)'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
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 three =<%=Three %>;
|
|
|
|
|
|
var xArr = three.categories
|
|
|
|
|
|
var data = three.series[0].data
|
|
|
|
|
|
var series = [{
|
|
|
|
|
|
name: '合格检查数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
|
|
|
|
|
}]
|
|
|
|
|
|
category('three', xArr, series)
|
|
|
|
|
|
//category('five', xArr, series)
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
function pie(id, title, xArr, data) {
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById(id))
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
|
|
|
var option = {
|
2021-08-13 11:15:59 +08:00
|
|
|
|
title: [{
|
|
|
|
|
|
text: title,
|
|
|
|
|
|
bottom: '0',
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
fontSize: 12,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
fontWeight: 300
|
|
|
|
|
|
}
|
|
|
|
|
|
}],
|
2021-04-30 10:28:37 +08:00
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
left: 'right',
|
|
|
|
|
|
top: 'center',
|
2021-08-13 11:15:59 +08:00
|
|
|
|
align: 'left',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
data: xArr,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
textStyle: {//图例文字的样式
|
|
|
|
|
|
color: '#f2f2f2'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
2021-08-13 11:15:59 +08:00
|
|
|
|
color: ['#1D9A78', '#8BC145', '#36AFCE', '#1D6FA9'],
|
2021-04-30 10:28:37 +08:00
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: title,
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
|
radius: ['40%', '70%'],
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
2021-08-13 11:15:59 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#333'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
position: 'inside',
|
2021-08-13 11:15:59 +08:00
|
|
|
|
formatter: function (data) { return data.percent.toFixed(0) + "%"; }
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
//opacity: 0.7,
|
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
|
borderColor: 'rgba(218,235,234, 1)'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
|
}
|
|
|
|
|
|
var xArr = ['完成', '未完成']
|
|
|
|
|
|
var data = [
|
2021-08-13 11:15:59 +08:00
|
|
|
|
{ value: 80, name: '完成' },
|
|
|
|
|
|
{ value: 20, name: '未完成' }
|
2021-04-30 10:28:37 +08:00
|
|
|
|
]
|
|
|
|
|
|
pie('one1', '单位一', xArr, data)
|
|
|
|
|
|
pie('one2', '单位二', xArr, data)
|
|
|
|
|
|
pie('one3', '单位三', xArr, data)
|
|
|
|
|
|
pie('one4', '单位四', xArr, data)
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var dataX = ['项目']
|
2021-08-13 11:15:59 +08:00
|
|
|
|
var one =<%=One %>;
|
|
|
|
|
|
var data = [one]
|
2021-04-30 10:28:37 +08:00
|
|
|
|
var dataT = [100]
|
|
|
|
|
|
echartsBarInit('four', "进度统计", dataX, data, dataT);
|
|
|
|
|
|
function echartsBarInit(id, title, dataX, data, dataT) {
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById(id)) // 初始化echarts实例
|
|
|
|
|
|
myChart.clear();
|
|
|
|
|
|
myChart.setOption(// 通过setOption来生成柱状图
|
|
|
|
|
|
{
|
|
|
|
|
|
title: {
|
|
|
|
|
|
// left:'center',
|
|
|
|
|
|
text: title,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
2021-08-13 11:15:59 +08:00
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
fontWeight: '300',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: { // 直角坐标系内绘图网格
|
|
|
|
|
|
left: '0', //grid 组件离容器左侧的距离,
|
|
|
|
|
|
//left的值可以是80这样具体像素值，
|
|
|
|
|
|
//也可以是'80%'这样相对于容器高度的百分比
|
|
|
|
|
|
top: '10',
|
|
|
|
|
|
right: '0',
|
|
|
|
|
|
bottom: '0',
|
|
|
|
|
|
containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候，
|
|
|
|
|
|
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
|
|
|
|
|
|
//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: { //直角坐标系grid中的x轴,
|
|
|
|
|
|
//一般情况下单个grid组件最多只能放上下两个x轴,
|
|
|
|
|
|
//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
|
|
|
|
|
|
type: 'value',//坐标轴类型,分别有：
|
|
|
|
|
|
//'value'-数值轴；'category'-类目轴;
|
|
|
|
|
|
//'time'-时间轴;'log'-对数轴
|
|
|
|
|
|
splitLine: { show: false },//坐标轴在 grid 区域中的分隔线
|
|
|
|
|
|
axisLabel: { show: false },//坐标轴刻度标签
|
|
|
|
|
|
axisTick: { show: false },//坐标轴刻度
|
|
|
|
|
|
axisLine: { show: false },//坐标轴轴线
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
axisTick: { show: false },
|
|
|
|
|
|
axisLine: { show: false },
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
// fontSize: 12
|
|
|
|
|
|
},
|
|
|
|
|
|
data: dataX//类目数据，在类目轴（type: 'category'）中有效。
|
|
|
|
|
|
//如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [//系列列表。每个系列通过 type 决定自己的图表类型
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '%',//系列名称
|
|
|
|
|
|
type: 'bar',//柱状、条形图
|
|
|
|
|
|
barWidth: 19,//柱条的宽度,默认自适应
|
|
|
|
|
|
data: data,//系列中数据内容数组
|
|
|
|
|
|
label: { //图形上的文本标签
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'right',//标签的位置
|
|
|
|
|
|
offset: [0, -20], //标签文字的偏移，此处表示向上偏移40
|
|
|
|
|
|
formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
|
|
|
|
|
|
color: '#fff',//标签字体颜色
|
|
|
|
|
|
fontSize: 10 //标签字号
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {//图形样式
|
|
|
|
|
|
normal: { //normal 图形在默认状态下的样式;
|
|
|
|
|
|
//emphasis图形在高亮状态下的样式
|
|
|
|
|
|
barBorderRadius: 10,//柱条圆角半径,单位px.
|
|
|
|
|
|
//此处统一设置4个角的圆角大小;
|
|
|
|
|
|
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0, 0, 1, 0,
|
|
|
|
|
|
[{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: '#22B6ED'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: '#3FE279'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
zlevel: 1//柱状图所有图形的 zlevel 值,
|
|
|
|
|
|
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '进度条背景',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
barGap: '-100%',//不同系列的柱间距离，为百分比。
|
|
|
|
|
|
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。
|
|
|
|
|
|
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
|
|
|
|
|
|
//并且是对此坐标系中所有 'bar' 系列生效。
|
|
|
|
|
|
barWidth: 19,
|
|
|
|
|
|
data: dataT,
|
|
|
|
|
|
color: '#151B87',//柱条颜色
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
barBorderRadius: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
<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>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
$(".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')
|
2021-08-13 11:15:59 +08:00
|
|
|
|
|
2021-04-30 10:28:37 +08:00
|
|
|
|
var three =<%=Three %>;
|
|
|
|
|
|
var three2 =<%=Three2 %>;
|
|
|
|
|
|
if (value == 0) {
|
|
|
|
|
|
var xArr = three.categories
|
|
|
|
|
|
var data = three.series[0].data
|
|
|
|
|
|
if (index == 2) {
|
|
|
|
|
|
xArr = three2.categories
|
|
|
|
|
|
data = three2.series[0].data
|
|
|
|
|
|
}
|
|
|
|
|
|
var series = [{
|
|
|
|
|
|
name: '合格检查数',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
|
|
|
|
|
}]
|
|
|
|
|
|
category('three', xArr, series)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
2021-08-13 11:15:59 +08:00
|
|
|
|
</html>
|
