|
|
@@ -0,0 +1,354 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang=zh-cn>
|
|
|
+<head>
|
|
|
+ <meta charset=utf-8>
|
|
|
+ <title>纵横计量支付系统</title>
|
|
|
+ <meta name=description content=计量支付>
|
|
|
+ <meta name=copyright content=smartcost.com.cn>
|
|
|
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
|
|
|
+ <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/global.js></script>
|
|
|
+ <script src=js/echarts.min.js></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="wrapContent">
|
|
|
+ <div class="wrapNav">
|
|
|
+ <ul class="nav nav-tabs" role="tablist">
|
|
|
+ <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">标段概况</a></li>
|
|
|
+ <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">审批</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="tab-content">
|
|
|
+ <div role="tabpanel" class="tab-pane active" id="home">
|
|
|
+ <div class="project">
|
|
|
+ <div class="proSection">
|
|
|
+ <!--图表4-->
|
|
|
+ <div id="chartContainer4" style="height: 350px; width: 100%;">
|
|
|
+ </div>
|
|
|
+ <!--图表5-->
|
|
|
+ <div id="chartContainer5" style="height: 300px; width: 100%;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="projectSeList">
|
|
|
+ <dl class="projectTable">
|
|
|
+ <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
|
|
|
+ <dd>
|
|
|
+ <table class="table table-hover">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>本期合同计量</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期数量变更计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>截止上期累计完成</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>累计完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ <dl class="projectTable">
|
|
|
+ <dt>第六期（上报：2015-09-09；通过：2015-09-13</dt>
|
|
|
+ <dd>
|
|
|
+ <table class="table table-hover">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>本期合同计量</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期数量变更计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>截止上期累计完成</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>累计完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div role="tabpanel" class="tab-pane" id="profile">
|
|
|
+ <div class="project">
|
|
|
+ <div class="projectSeList mT2">
|
|
|
+ <dl class="projectTable">
|
|
|
+ <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
|
|
|
+ <dd>
|
|
|
+ <table class="table table-hover">
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>本期合同计量</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期数量变更计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>截止上期累计完成</p>
|
|
|
+ <b>￥5,000,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <p>本期完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <p>累计完成计量</p>
|
|
|
+ <b>￥233,453,000.00</b>
|
|
|
+ </td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </dd>
|
|
|
+ </dl>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="approvalList">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="approvalImg"><img class="pass" src="images/avatar-1.png">王三<b class="colGreen fR">审批完成（2015-02-02）</b></div>
|
|
|
+ <div class="approvalView">审批意见审批意见审批意见审批意见审批意见,萨大声的,审批意见审批意见审批意见审批意见审批意见</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="approvalImg"><img class="wait" src="images/avatar-2.png">张三（我）<b class="colOrange fR">审批中</b></div>
|
|
|
+ <div class="approvalView">审批意见审批意见审批意见</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="approvalImg"><img class="pa2ss" src="images/avatar-3.png">李雷<b class="colGray fR">待审</b></div>
|
|
|
+ <div class="approvalView">审批意见审批意见审批意见审批意见审</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div class="approvalImg"><img class="unpass" src="images/avatar-4.png">王五<b class="colRed fR">审批不通过</b></div>
|
|
|
+ <div class="approvalView">审批意见</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="bottomToolsbar">
|
|
|
+ <div class="bottomView">
|
|
|
+ <form>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>审批意见</label>
|
|
|
+ <textarea class="form-control" rows="3"></textarea>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li><button type="button" class="submit btn-danger" data-toggle="modal" data-target="#myModalUnpass">审批不通过</button></li>
|
|
|
+ <li><button type="button" class="submit btn-success" data-toggle="modal" data-target="#myModalPass">审批通过</button></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal fade modalWrap" id="myModalUnpass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
+ <h4 class="modal-title">审批意见</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <!-- <h4><p>审批意见</p></h4> -->
|
|
|
+ <textarea class="form-control" rows="3" placeholder="填写审批意见"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
|
|
+ <button type="button" class="btn btn-danger">确认审批不通过</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal fade modalWrap" id="myModalPass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
+ <h4 class="modal-title">审批意见</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <!-- <h4><p>审批意见</p></h4> -->
|
|
|
+ <textarea class="form-control" rows="3" placeholder="填写审批意见"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
|
|
+ <button type="button" class="btn btn-success">确认审批通过</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+ //4 标段期数计量进度//
|
|
|
+ var myChart = echarts.init(document.getElementById('chartContainer4'));
|
|
|
+ var option = {
|
|
|
+ color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
|
|
|
+ '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
|
|
|
+ '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
+ '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ calculable : true,
|
|
|
+ legend: {
|
|
|
+ data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
|
|
|
+ },
|
|
|
+ dataZoom : {
|
|
|
+ show : true,
|
|
|
+ start :0,
|
|
|
+ end : 100
|
|
|
+ },
|
|
|
+ xAxis : [
|
|
|
+ {
|
|
|
+ type : 'category',
|
|
|
+ splitLine : {show : true},
|
|
|
+ data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid:[
|
|
|
+ {
|
|
|
+ x2:'40',
|
|
|
+ top:'25%',
|
|
|
+ bottom:'20%',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis : [
|
|
|
+ {
|
|
|
+ type : 'value',
|
|
|
+ position: 'left',
|
|
|
+ splitArea : {show : true}
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type : 'value',
|
|
|
+ name:'完成度',
|
|
|
+ axisLabel : {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ position: 'right',
|
|
|
+ splitArea : {show : true}
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'本期合同计量',
|
|
|
+ type:'bar',
|
|
|
+ tooltip : {trigger: 'item',formatter: "{b} <br/>{a}：{c}元"},
|
|
|
+ stack: '合同',
|
|
|
+ data:[320, 332, 301, 334, 390, 330, 320]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'本期数量变更计量',
|
|
|
+ type:'bar',
|
|
|
+ tooltip : {trigger: 'item',formatter: "{b} <br/>{a}：{c}元"},
|
|
|
+ stack: '合同',
|
|
|
+ data:[320, -20, 301, 334, 390, 330, 320]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'截至上期累计完成',
|
|
|
+ type:'bar',
|
|
|
+ tooltip : {trigger: 'item',formatter: "{b} <br/>{a}：{c}元"},
|
|
|
+ stack: '完成',
|
|
|
+ data:[120, 132, 101, 134, 90, 230, 210]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'本期完成计量',
|
|
|
+ type:'bar',
|
|
|
+ tooltip : {trigger: 'item',formatter: "{b} <br/>{a}：{c}元"},
|
|
|
+ stack: '完成',
|
|
|
+ data:[220, 182, 191, 234, 290, 330, 310]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'完成度',
|
|
|
+ type:'line',
|
|
|
+ tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data:[10, 15, 20, 13, 11, 9, 5]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+};
|
|
|
+
|
|
|
+ // 为echarts对象加载数据
|
|
|
+ myChart.setOption(option);
|
|
|
+ //4 标段期数计量进度//
|
|
|
+ //5 期数组成//
|
|
|
+ var myChart = echarts.init(document.getElementById('chartContainer5'));
|
|
|
+ var option = {
|
|
|
+ color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
|
|
|
+ '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
|
|
|
+ '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
|
|
|
+ '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
|
|
|
+ title : {
|
|
|
+ text: '期数计量组成',
|
|
|
+ x:'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip : {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b}：{c} 元<br>占标段：{d} %"
|
|
|
+ },
|
|
|
+ calculable : true,
|
|
|
+ series : [
|
|
|
+ {
|
|
|
+ name:'标段计量分布',
|
|
|
+ type:'pie',
|
|
|
+ roseType: 'angle',
|
|
|
+ radius : '40%',
|
|
|
+ center: ['50%', 155],
|
|
|
+ data:[
|
|
|
+ {value:27814964.00, name:'第一期'},
|
|
|
+ {value:41043186.10, name:'第二期'},
|
|
|
+ {value:42917475.00, name:'第三期'},
|
|
|
+ {value:27634982.00, name:'第四期'},
|
|
|
+ {value:27634982.00, name:'第五期'},
|
|
|
+ {value:27634982.00, name:'第六期'},
|
|
|
+ {value:27634982.00, name:'第七期'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 为echarts对象加载数据
|
|
|
+ myChart.setOption(option);
|
|
|
+ //5 期数组成//
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
