|
|
@@ -1,344 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang=zh-cn>
|
|
|
-<head>
|
|
|
- <meta charset=utf-8>
|
|
|
- <title>纵横计量支付系统</title>
|
|
|
- <meta name=description content=计量支付>
|
|
|
- <meta name=copyright content=smartcost.com.cn>
|
|
|
- <link rel=stylesheet href=css/bootstrap.css>
|
|
|
- <link rel=stylesheet href=css/style.css>
|
|
|
- <script src=js/jquery-1.9.1.min.js></script>
|
|
|
- <script src=js/bootstrap.js></script>
|
|
|
- <script src=js/jl.js></script>
|
|
|
-
|
|
|
-<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
|
|
|
-</head>
|
|
|
-<body><div class="wrapHeader"><h1 title="纵横计量支付" class="mainLogo"></h1><div class="userInfo"><img src="images/avtra.png" class="fR">
|
|
|
- <div class="btn-group">
|
|
|
- <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">张三 <span class="caret"></span></button>
|
|
|
- <ul class="dropdown-menu">
|
|
|
- <li><a href="#">个人信息</a></li>
|
|
|
- <li><a href="#"><span data-icon="r" aria-hidden="true"></span> 工作组</a></li>
|
|
|
- <li><a href="#"><span data-icon="B" aria-hidden="true"></span> 我的任务</a></li>
|
|
|
- <li class="divider"></li>
|
|
|
- <li><a href="#">帮助中心</a></li>
|
|
|
- <li><a href="#">退出</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="wrapContent">
|
|
|
- <div class="mainSidebar">
|
|
|
- <div class="mainNav">
|
|
|
- <ul>
|
|
|
- <li><a href="w-project.html" class="focus" title="项目管理"><div data-icon="A" aria-hidden="true" class="navIcon"></div>项目管理</a></li>
|
|
|
- <li><a href="r-project.html" title="需审批项目"><div data-icon="C" aria-hidden="true" class="navIcon"></div>审批项目</a><span class="badge badge-warning">4</span></li>
|
|
|
- <li><a href="s-project.html" title="我编制的项目"><div data-icon="B" aria-hidden="true" class="navIcon"></div>编制项目</a></li>
|
|
|
- <li><a href="" title="生成报表"><div data-icon="D" aria-hidden="true" class="navIcon"></div>报表</a></li>
|
|
|
- <li><a href="" title="数据汇总"><div data-icon="E" aria-hidden="true" class="navIcon"></div>汇总</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mainContainer">
|
|
|
- <!--内容-->
|
|
|
- <div class="mainContent">
|
|
|
- <div class="title clearfix">
|
|
|
- <ul class="nav nav-pills">
|
|
|
- <li class="dropdown"><a href="w-project.html" title="返回"><span class="closePanel" aria-hidden="true" data-icon="Z"></span></a></li>
|
|
|
- <li class="dropdown">
|
|
|
- <a href="#" data-toggle="dropdown" class="dropdown-toggle">
|
|
|
- 黄金大桥项目<b class="caret"></b>
|
|
|
- </a>
|
|
|
- <ul class="dropdown-menu">
|
|
|
- <li><a href="#">重庆XX至XX公路</a></li>
|
|
|
- <li><a href="#">重庆XX至XX公路</a></li>
|
|
|
- <li><a href="#">重庆XX至XX公路</a></li>
|
|
|
- <li><a href="#">重庆XX至XX公路</a></li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="fR">
|
|
|
- <a href="#pojoption" data-toggle="modal" class="btn"><i class="icon-cog"></i> 项目设置</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--导航-->
|
|
|
- <ul class="nav nav-tabs">
|
|
|
- <li class="active">
|
|
|
- <a href="w-project-detail.html">项目汇总</a>
|
|
|
- </li>
|
|
|
- <li><a href="w-project-section.html">标段列表</a></li>
|
|
|
- </ul>
|
|
|
- <!--导航-->
|
|
|
- <script type="text/javascript">
|
|
|
- // 路径配置
|
|
|
- require.config({
|
|
|
- paths:{
|
|
|
- 'echarts' : 'http://echarts.baidu.com/build/echarts'
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 使用
|
|
|
- require(
|
|
|
- [
|
|
|
- 'echarts',
|
|
|
- 'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
|
|
|
- 'echarts/chart/bar'
|
|
|
- ],
|
|
|
- function(ec) {
|
|
|
- //1 标段计量分布//
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer'));
|
|
|
- var option = {
|
|
|
- color: ['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
|
|
|
- '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
|
|
|
- '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
- '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
- title : {
|
|
|
- text: '标段计量分布',
|
|
|
- x:'left'
|
|
|
- },
|
|
|
- tooltip : {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{a} <br/>{b}：{c} <br>占总项目：{d} %"
|
|
|
- },
|
|
|
- legend: {
|
|
|
- selectedMode:false,
|
|
|
- orient : 'vertical',
|
|
|
- x : 'left',
|
|
|
- y : 'center',
|
|
|
- data:['土建合同','监理合同','设计合同','机电合同']
|
|
|
- },
|
|
|
- calculable : true,
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'标段计量分布',
|
|
|
- type:'pie',
|
|
|
- radius : '60%',
|
|
|
- center: ['60%', 175],
|
|
|
- data:[
|
|
|
- {value:27814964.00, name:'土建合同'},
|
|
|
- {value:41043186.10, name:'监理合同'},
|
|
|
- {value:42917475.00, name:'设计合同'},
|
|
|
- {value:27634982.00, name:'机电合同'}
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
- //1 标段计量分布//
|
|
|
- //2 标段计量进度//
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer2'));
|
|
|
- var option = {
|
|
|
- color:["#e9af68","#57b7b6","#e4575a"],
|
|
|
- title : {
|
|
|
- text: '标段计量进度',
|
|
|
- },
|
|
|
- tooltip : {
|
|
|
- trigger: 'axis',
|
|
|
- formatter: "{b} <br/>{a}：{c}元 <br/>{a1}：{c1}元<br/>{a2}：{c2} %"
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data:['总价','累计完成计量','完成进度百分比']
|
|
|
- },
|
|
|
- xAxis : [
|
|
|
- {
|
|
|
- type : 'category',
|
|
|
- data : ['土建合同','监理合同','设计合同','机电合同']
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis : [
|
|
|
- {
|
|
|
- type : 'value',
|
|
|
- name : '金额',
|
|
|
- position:'left',
|
|
|
- axisLabel : {
|
|
|
- formatter: '{value} 元'
|
|
|
- },
|
|
|
- splitArea : {show : true}
|
|
|
- },
|
|
|
- {
|
|
|
- type : 'value',
|
|
|
- position:'right',
|
|
|
- max:'100',
|
|
|
- axisLabel : {
|
|
|
- formatter: '{value} %'
|
|
|
- },
|
|
|
- splitLine : {show : true}
|
|
|
- }
|
|
|
- ],
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'总价',
|
|
|
- type:'bar',
|
|
|
- data:[27814964.00,41043186.10, 42917475.00, 27634982.00],
|
|
|
- },
|
|
|
- {
|
|
|
- name:'累计完成计量',
|
|
|
- type:'bar',
|
|
|
- data:[20571481.02,28770211.71, 23427801.00, 1708798.00],
|
|
|
- },
|
|
|
- {
|
|
|
- name:'完成进度百分比',
|
|
|
- type:'line',
|
|
|
- yAxisIndex: 1,
|
|
|
- data:[73.95,70,54.58,6.18],
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
- //2 标段计量进度//
|
|
|
- //3 标段计量分布//
|
|
|
- // 基于准备好的dom，初始化echarts图表
|
|
|
- var myChart = ec.init(document.getElementById('chartContainer3'));
|
|
|
- var option = {
|
|
|
- color:["#e9af68","#57b7b6"],
|
|
|
- title : {
|
|
|
- text: '项目按月进度'
|
|
|
- },
|
|
|
- tooltip : {
|
|
|
- trigger: 'axis',
|
|
|
- formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data:['累计完成','本月完成']
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- show : true,
|
|
|
- feature : {
|
|
|
- magicType : {show: true, type: ['line', 'bar']}
|
|
|
- }
|
|
|
- },
|
|
|
- dataZoom : {
|
|
|
- show : true,
|
|
|
- realtime: true,
|
|
|
- start : 50,
|
|
|
- end : 100
|
|
|
- },
|
|
|
- xAxis : [
|
|
|
- {
|
|
|
- type : 'category',
|
|
|
- boundaryGap : false,
|
|
|
- data : [
|
|
|
- '2013年2月','3月','4月','5月','6月','7月','8月','9月','10月'
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis : [
|
|
|
- {
|
|
|
- type : 'value',
|
|
|
- axisLabel : {
|
|
|
- formatter: '{value} %'
|
|
|
- },
|
|
|
- splitArea : {show : true}
|
|
|
- }
|
|
|
- ],
|
|
|
- series : [
|
|
|
- {
|
|
|
- name:'累计完成',
|
|
|
- type:'line',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- lineStyle: {
|
|
|
- shadowColor : 'rgba(0,0,0,0.4)',
|
|
|
- shadowBlur: 5,
|
|
|
- shadowOffsetX: 3,
|
|
|
- shadowOffsetY: 3
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
|
|
|
- },
|
|
|
- {
|
|
|
- name:'本月完成',
|
|
|
- type:'line',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- lineStyle: {
|
|
|
- shadowColor : 'rgba(0,0,0,0.4)',
|
|
|
- shadowBlur: 5,
|
|
|
- shadowOffsetX: 3,
|
|
|
- shadowOffsetY: 3
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
|
|
|
- }
|
|
|
- ]
|
|
|
-};
|
|
|
-
|
|
|
-
|
|
|
- // 为echarts对象加载数据
|
|
|
- myChart.setOption(option);
|
|
|
- //3 标段计量分布//
|
|
|
- }
|
|
|
- );
|
|
|
- </script>
|
|
|
- <div class="project">
|
|
|
- <div class="proSection clearfix">
|
|
|
- <!--图表1-->
|
|
|
- <div class="fL" style="width:49%">
|
|
|
- <div id="chartContainer" style="height: 300px; width: 100%;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--图表1-->
|
|
|
- <!--图表2-->
|
|
|
- <div class="fR" style="width:49%">
|
|
|
- <div id="chartContainer2" style="height: 300px; width: 100%;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--图表2-->
|
|
|
- </div>
|
|
|
- <div class="proSection clearfix">
|
|
|
- <!--图表3-->
|
|
|
- <div id="chartContainer3" style="height: 300px; width: 100%;">
|
|
|
- </div>
|
|
|
- <!--图表3-->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--内容-->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 项目设置弹出 -->
|
|
|
- <div id="pojoption" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
- <div class="modal-header">
|
|
|
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
- <h3 id="myModalLabel">项目设置</h3>
|
|
|
- </div>
|
|
|
- <div class="modal-body">
|
|
|
-
|
|
|
- <div class="form">
|
|
|
- <form class="form-horizontal">
|
|
|
- <div class="control-group">
|
|
|
- <label class="control-label" for="inputEmail">项目名称</label>
|
|
|
- <div class="controls">
|
|
|
- <input type="text" placeholder="输入项目名称" value="黄金大桥项目">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="control-group">
|
|
|
- <label class="control-label" for="inputEmail">颜色标识</label>
|
|
|
- <div class="controls">
|
|
|
- <ul class="pjColorList">
|
|
|
- <li class="pjColor pj-c1 pjSelect"></li>
|
|
|
- <li class="pjColor pj-c2"></li>
|
|
|
- <li class="pjColor pj-c3"></li>
|
|
|
- <li class="pjColor pj-c4"></li>
|
|
|
- <li class="pjColor pj-c5"></li>
|
|
|
- <li class="pjColor pj-c6"></li>
|
|
|
- <li class="pjColor pj-c7"></li>
|
|
|
- <li class="pjColor pj-c8"></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="modal-footer">
|
|
|
- <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
|
|
|
- <button class="btn btn-primary">保存</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 项目设置弹出 -->
|
|
|
-<script type="text/javascript">autoFlashHeight();</script>
|
|
|
-</body>
|
