S.H.I.E.L.D.
/
measureSAAS.v2.APP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>标段概况-计量支付</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
    <script src=js/echarts/echarts.min.js></script>
    <link rel="shortcut icon" href="img/favicon.ico">
<style>
</style>
</head>
<body>
    <div class="container">
        <!--顶部-->
        <nav class="fixed-top bg-dark">
            <div class="my-2 d-flex justify-content-between">
                <span class="text-white ml-3"><a href="biaoduan.html" class="mr-2 text-white"><i class="fa fa-chevron-left"></i> 标段概况</a></span>
                <a tabindex="0" class="text-white text-truncate" style="width:150px" data-toggle="popover" data-placement="top" data-content="标段名称标段名称标段名称标段名称标段名称标段名称段名称标段名称标段名称标段名称标段名称" data-trigger="focus">标段名称标段名称标段名称标段名称标段名称标段名称段名称标段名称标段名称标段名称标段名称</a>
                <div class="mr-3">
                    <div class="dropdown">
                      <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-toggle="dropdown">
                        张三
                      </button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">退出登录</a>
                      </div>
                    </div>
                </div>
            </div>
        </nav>
        <!--标段概况-->
        <div class="py-6">
          <!--标签-->
          <ul class="nav nav-tabs nav-fill">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#gaikuang" role="tab">概况</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#jlqi" role="tab">计量期</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#biangeng" role="tab">工程变更</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="gaikuang">
              <!--图表-->
              <div class="card mb-3 mr-1 mt-3">
                <div class="card-body">
                  <h5 class="card-title">月进度表</h5>
                  <div style="overflow-x:scroll;padding-bottom: 10px">
                    <div id="chartContainer3" style="height: 300px; width: 250%;">
                    </div>
                  </div>
                    <p class="text-center text-muted m-0">左右滑动</p>
                </div>
              </div>
              <div class="card mb-3 mr-1">
                <div class="card-body">
                  <h5 class="card-title">期进度表</h5>
                  <div style="overflow-x:scroll;padding-bottom: 10px">
                    <div id="chartContainer4" style="height: 300px; width: 320%;">
                    </div>
                  </div>
                    <p class="text-center text-muted m-0">左右滑动</p>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="jlqi">
              <!--期列表-->
              <dl class="mb-2 mt-3">
                <dt class="bg-light p-2 d-flex justify-content-between"><span>第3期</span><span class="text-warning">王五-监理 审批中</span></dt>
                <dd>
                  <table class="table table-hover">
                    <tbody><tr>
                      <td>
                        <p class="mb-0">本期合同计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">本期数量变更计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">本期完成计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">截止上期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">截止本期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">本期应付</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <a class="btn btn-block btn-success" href="biaoduan-qi.html">审批本期</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                </dd>
                <dt class="bg-light p-2 d-flex justify-content-between"><span>第2期</span><span class="text-success">审批完成</span></dt>
                <dd>
                  <table class="table table-hover">
                    <tbody><tr>
                      <td>
                        <p class="mb-0">本期合同计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">本期数量变更计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">本期完成计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">截止上期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">截止本期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">本期应付</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                  </tbody></table>
                </dd>
                <dt class="bg-light p-2 d-flex justify-content-between"><span>第1期</span><span class="text-success">审批完成</span></dt>
                <dd>
                  <table class="table table-hover">
                    <tbody><tr>
                      <td>
                        <p class="mb-0">本期合同计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">本期数量变更计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">本期完成计量</p>
                        <b>￥5,000,000.00</b>
                      </td>
                      <td>
                        <p class="mb-0">截止上期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">截止本期完成计量</p>
                        <b>￥233,453,000.00</b>
                      </td>
                      <td></td>
                    </tr>
                  </tbody></table>
                </dd>
              </dl>
            </div>
            <div class="tab-pane" id="biangeng">
              <!--工程变更-->
              <dl class="mb-2 mt-3">
                <dt class="bg-light p-2 d-flex justify-content-between"><span><a href="biaoduan-biangeng.html">LZTJ-1标项目部发变更(2015)001号</a></span></dt>
                <dd>
                  <table class="table table-hover">
                    <tbody>
                    <tr>
                      <td colspan="2">
                        <p class="mb-0">工程名称</p>
                        收费站出口右侧加宽段及K0+532基底换填
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">变更性质</p>
                        <b>一般</b>
                      </td>
                      <td>
                        <p class="mb-0">变更金额</p>
                        <b>101112.23</b>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2"><span class="text-warning">王五-监理 审批中</span></td>
                    </tr>
                    </tbody>
                  </table>
                </dd>
                <dt class="bg-light p-2 d-flex justify-content-between"><span><a href="biaoduan-biangeng.html">LZTJ-1标项目部发变更(2015)002号</a></span></dt>
                <dd>
                  <table class="table table-hover">
                    <tbody>
                    <tr>
                      <td colspan="2">
                        <p class="mb-0">工程名称</p>
                          K0+440通道台背回填
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <p class="mb-0">变更性质</p>
                        <b>一般</b>
                      </td>
                      <td>
                        <p class="mb-0">变更金额</p>
                        <b>101112.23</b>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2"><a href="biaoduan-biangeng.html" class="btn btn-block btn-success">审批变更</a></td>
                    </tr>
                    </tbody>
                  </table>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <!--底栏菜单-->
        <nav class="fixed-bottom navbar-dark bg-light border-top">
          <ul class="nav nav-fill my-2">
              <li class="nav-item">
                <a class="nav-link text-muted" href="todo.html"><i class="fa fa-check-square-o"></i> 待审批</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active " href="biaoduan.html"><i class="fa fa-list-ul"></i> 项目</a>
              </li>
            </ul>
        </nav>
    </div>
    <!-- JS. -->
    <script src="js/jquery/jquery-3.2.1.min.js"></script>
    <script src="js/popper/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/global.js"></script>
        <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'],
                              title : {
                                  text: ''
                              },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['本期合同计量','本期数量变更计量','截止上期累计完成','本期完成计量','完成度']
        },
        dataZoom: [
               {show: true,start: 0, end: 100}
          ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
            }
        ],
        yAxis : [
            {
               type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                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:[32322222220, 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 标段期数计量进度//
                    //3 标段月进度//
    // 基于准备好的dom，初始化echarts图表
                    var myChart = echarts.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,
            start : 50,
            end : 100
        },
        xAxis : [
            {
                                      type : 'category',
                                      boundaryGap : true,
                data : [
                    '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>
           
</body>

</html>