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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
							<!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>
                <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="#shenpi" 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 id="chartContainer3" style="height: 300px; width: 100%;">
                  </div>
                </div>
              </div>
              <div class="card mb-3 mr-1">
                <div class="card-body">
                  <h5 class="card-title">期进度表</h5>
                  <div id="chartContainer4" style="height: 300px; width: 100%;">
                  </div>
                </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>
                  </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="shenpi">
              <!--最新期-->
              <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></td>
                    </tr>
                  </tbody></table>
                </dd>
              </dl>
              <!--审批流程-->
              <div class="card mt-3">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    <span class="text-success pull-right"><small>2017-11-25</small> 上报</span>
                     <h5 class="card-title"><i class="fa fa-play-circle fa-rotate-90 text-success"></i> 布尔 <small class="text-muted">施工</small></h5>
                  </li>
                  <li class="list-group-item">
                    <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
                     <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 张三 <small class="text-muted">监理</small></h5>
                     <p class="card-text">审批意见。</p>
                  </li>
                  <li class="list-group-item">
                    <span class="text-success pull-right"><small>2017-11-25</small> 审批通过</span>
                     <h5 class="card-title"><i class="fa fa-chevron-circle-down text-success"></i> 王五 <small class="text-muted">监理</small></h5>
                     <p class="card-text">审批意见。</p>
                  </li>
                  <li class="list-group-item">
                    <span class="text-warning pull-right"><small>2017-11-25</small>审批退回 王五</span>
                     <h5 class="card-title"><i class="fa fa-stop-circle text-warning"></i> 李四 <small class="text-muted">监理</small></h5>
                     <p class="card-text">审批意见。</p>
                  </li>
                  <li class="list-group-item">
                    <span class="pull-right">审批中</span>
                     <h5 class="card-title"><i class="fa fa-chevron-circle-down"></i> 王五 <small class="text-muted">监理</small></h5>
                     <div class="form-group">
                       <div class="text-center">
                        <button class="btn btn-success" data-toggle="modal" data-target="#sp-done" >审批通过</button>
                        <button class="btn btn-warning" data-toggle="modal" data-target="#sp-back" >审批退回</button>
                      </div>
                     </div>
                  </li>
                  <li class="list-group-item">
                     <h5 class="card-title"><i class="fa fa-stop-circle"></i> 李四 <small class="text-muted">监理</small></h5>
                  </li>
                </ul>
              </div>
            </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>
    <!--审批通过弹窗-->
    <div class="modal" tabindex="-1" role="dialog" id="sp-done">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">审批通过</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
               <label>审批意见</label>
               <textarea class="form-control" rows="8"></textarea>
             </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-success">审批通过</button>
          </div>
        </div>
      </div>
    </div>
    <!--审批退回弹窗-->
    <div class="modal" tabindex="-1" role="dialog" id="sp-back">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">审批通过</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
               <label>审批意见</label>
               <textarea class="form-control" rows="8"></textarea>
             </div>
             <div class="alert alert-warning">
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline1">退回上报 布尔</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
                    <label class="custom-control-label" for="customRadioInline2">退回上一审批人 张三</label>
                  </div>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-warning">确认退回</button>
          </div>
        </div>
      </div>
    </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:[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 标段期数计量进度//
                    //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>
            <!--sjs-->
    <script>
        $(document).ready(function () {
        const data = [
            {
                单位:'稍等',
                精度:3,
            },{
                单位:'km',
                精度:3,
            },{
                单位:'m',
                精度:3,
            },{
                单位:'m2',
                精度:3,
            },{
                单位:'m3',
                精度:3,
            },{
                单位:'kg',
                精度:3,
            },{
                单位:'个',
                精度:3,
            },{
                单位:'台',
                精度:3,
            },{
                单位:'套',
                精度:3,
            },{
                单位:'棵',
                精度:3,
            },{
                单位:'组',
                精度:3,
            },{
                单位:'总额',
                精度:3,
            },{
                单位:'系统',
                精度:3,
            },{
                单位:'其他未列单位',
                精度:3,
            }
          ];
          const spread = new GC.Spread.Sheets.Workbook($('#option-spread1')[0], {
              sheetCount: 1
          });
          spread.getActiveSheet().setDataSource(data);
           spread.options.tabStripVisible = false;
        })
    </script>
</body>

</html>