增加添加变更页面；台帐顶标签移至右侧；中间计量/期计量增加新页面

biangeng-new.html

@@ -127,6 +127,14 @@
   											<a href="#" class="pull-right" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="自动编号"><i class="fa fa-repeat"></i></a>
   									    <input class="form-control" value="LZTJ-1标项目部发变更(2015)001号" type="text">
   									  </div>
+    									  <div class="form-group">
+    									    <label><b class="text-danger">*&nbsp;</b>申请编号</label>
+    											<a href="#" class="pull-right" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="自动编号"><i class="fa fa-repeat"></i></a>
+    									    <input class="form-control is-invalid" value="LZTJ-1标项目部发变更(2015)001号" type="text">
+                          <div class="invalid-feedback">
+                           您填写的编号已存在。
+                          </div>
+                        </div>
   									  <div class="form-group">
   									    <label><b class="text-danger">*&nbsp;</b>工程名称</label>
   									    <input class="form-control" value="收费站出口右侧加宽段及K0+532基底换填" type="text">

biangeng-new2.html

@@ -103,22 +103,22 @@
     					<div class="title-main d-flex justify-content-between">
     						<div>
                   <ul class="nav nav-pills">
-										<li class="nav-item"><a class="nav-link active" href="#">变更信息</a></li>
-										<li class="nav-item"><a class="nav-link" href="#">变更清单</a></li>
-										<li class="nav-item"><a class="nav-link" href="#">附件</a></li>
-										<li class="nav-item"><a class="nav-link" href="#">审批流程</a></li>
+										<li class="nav-item"><a class="nav-link active" href="biangeng-new2.html">变更信息</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new3.html">变更清单</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new4.html">附件</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new5.html">审批流程</a></li>
 									</ul>
                 </div>
                 <div>
-                  <a href="biangeng-new.html" class="btn btn-sm btn-primary pull-right">提交审批</a>
-                  <a href="biangeng-new.html" class="btn btn-sm btn-success pull-right">保存</a>
+                  <a href="#sub-ap" data-toggle="modal" data-target="#sub-ap" class="btn btn-sm btn-primary pull-right">提交审批</a>
+                  <a href="" class="btn btn-sm btn-success pull-right">保存</a>
                 </div>
               </div>
     				</div>
     				<div class="content-wrap">
     					<div class="c-body">
                 <!--变更信息-->
-  							<legend><span class="glyphicon glyphicon-info-sign"></span> 变更信息</legend>
+  							<legend>变更信息</legend>
   							<div class="row">
   								<div class="col-md-4">
   									<form>
@@ -225,7 +225,65 @@
     					</div>
     				</div>
     			</div>
-    		</div>	</div>
+    		</div>
+      </div>
+      <!--变更单位-->
+  		<div class="modal fade" id="editcompany" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  		  <div class="modal-dialog" role="document">
+  		    <div class="modal-content">
+  		      <div class="modal-header">
+  		        <h5 class="modal-title" id="myModalLabel">变更单位</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">
+  			      	<input type="text" class="form-control" value="AA公司">
+  			      </div>
+  		      	<div class="form-group">
+  			      	<input type="text" class="form-control" value="BB公司">
+  			      </div>
+  						<div class="alert alert-warning" role="alert">修改后，已创建的变更不受影响。</div>
+  			      <div class="form-group">
+  			      	<input type="text" class="form-control" value="CC公司">
+  			      </div>
+  		        <p><a class="btn btn-primary btn-sm" href="#" role="button" title="填写公司"><b class="fa fa-plus"></b></a></p>
+  		        <input type="text" class="form-control" placeholder="请输入公司名称">
+  		      </div>
+  		      <div class="modal-footer">
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+  		        <a type="button" class="btn btn-primary" href="#">确定</a>
+  		      </div>
+  		    </div>
+  		  </div>
+  		</div>
+      <!--提交审批-->
+  		<div class="modal fade" id="sub-ap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  		  <div class="modal-dialog" role="document">
+  		    <div class="modal-content">
+  		      <div class="modal-header">
+  		        <h5 class="modal-title" id="myModalLabel">提交审批</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+  		      </div>
+  		      <div class="modal-body">
+  		      	<h5>还没添加任何变更清单，无法提交。</h5>
+  		      	<h5>还没设置审批流程，无法提交。</h5>
+  		      	<h5>确认提交审批？</h5>
+  		      </div>
+  		      <div class="modal-footer">
+              <!--无法提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">好的</button>
+              <!--确认提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+              <button type="button" class="btn btn-primary" data-dismiss="modal">确认提交</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>

biangeng-new4.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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">
+</head>
+
+<body>
+  <div class="header">
+		<h1 class="logo"><a>变更管理-纵横变更管理系统</a></h1>
+    <div class="poj-name">
+      <span class="name">项目A</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">项目B</a>
+         <a href="#" class="dropdown-item">项目C</a>
+         <a href="#" class="dropdown-item">项目D</a>
+       </div>
+     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
+    </div>
+    <div class="poj-name">
+      <span class="name">WWUJ-1</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">WWUJ-2</a>
+         <a href="#" class="dropdown-item">WWUJ-3</a>
+         <a href="#" class="dropdown-item">WWUJ-4</a>
+       </div>
+     </div>
+    </div>
+			<div class="header-nav"></div>
+			<div class="header-user pull-right">
+				<div class="avatar btn-group">
+					<a class="dropdown-toggle" data-toggle="dropdown">
+						<span class="pic"><img src="img/avatar.png"></span>
+						<span>张三</span>
+						<span class="caret"></span>
+					</a>
+					<div class="dropdown-menu">
+					 <a href="account-info.html"  class="dropdown-item">账号资料</a>
+					 <a href="#"  class="dropdown-item">账号安全</a>
+					 <div class="dropdown-divider"></div>
+ 					 <a href="#"  class="dropdown-item">新手引导</a>
+					 <a href="#"  class="dropdown-item">帮助中心</a>
+					 <a href="#" class="dropdown-item">退出登录</a>
+				 </div>
+				</div>
+				<div class="msg">
+					<a>
+					<i class="fa fa-bell"></i><sup >0</sup>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<div class="main-nav">
+			<div class="nav-top">
+        <ul class="nav nav-pills flex-column bg-nav">
+          <li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
+          <li class="nav-item"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
+          <li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="taizhang.html">台帐分解</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-bg.html">台帐修订</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-jl.html">计量台帐</a></li>
+            </ul>
+          </li>
+          <li class="nav-item"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="jiliang.html">中间计量</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-list.html">计量审批</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-qi.html">期计量</a></li>
+            </ul>
+          </li>
+          <li class="nav-item active"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
+          <li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+        </ul>
+			</div>
+		</div>
+    <div class="main-panel">
+    			<div class="panel-content">
+    				<div class="panel-title fluid">
+    					<div class="title-main d-flex justify-content-between">
+    						<div>
+                  <ul class="nav nav-pills">
+										<li class="nav-item"><a class="nav-link" href="biangeng-new2.html">变更信息</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new3.html">变更清单</a></li>
+										<li class="nav-item"><a class="nav-link active" href="biangeng-new4.html">附件</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new5.html">审批流程</a></li>
+									</ul>
+                </div>
+                <div>
+                  <a href="#sub-ap" data-toggle="modal" data-target="#sub-ap" class="btn btn-sm btn-primary pull-right">提交审批</a>
+                </div>
+              </div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <legend>附件&nbsp;&nbsp;<a href="#addfujian" class="btn btn-outline-primary btn-sm pull-right" data-toggle="modal"><span class="glyphicon glyphicon-open"></span> 上传附件</a></legend>
+  							<table class="table table-bordered">
+  								<thead>
+  									<tr><th width="50">序号</th><th>名称</th><th width="90">大小</th><th width="100">上传时间</th><th width="100">操作</th></tr>
+  								</thead>
+  								<tbody>
+  									<tr><td>1</td><td><a href="">合同段工程变更现场办公会议纪要的通知.rar</a></td><td>682.64 KB</td><td>2017-01-01 13:22</td><td><a href="#" class="btn btn-light btn-sm" title="删除附件"><span class="fa fa-trash text-danger"></span></a></td></tr>
+  									<tr><td>2</td><td><a href="">管理处关于发送LZTJ-1合同段YT-24号设计更改的通知.rar</a></td><td>1.52 MB</td><td>2017-01-01 14:22</td><td><a href="#" class="btn btn-light btn-sm" title="删除附件"><span class="fa fa-trash text-danger"></span></a></td></tr>
+  									<tr><td>3</td><td><a href="">原设计施工图.pdf</a></td><td>396.73 KB</td><td>2017-01-01 12:22</td><td></td></tr>
+  								</tbody>
+  							</table>
+    					</div>
+    				</div>
+    			</div>
+    		</div>
+      </div>
+  		<!--添加附件-->
+  		<div class="modal fade" id="addfujian">
+  		  <div class="modal-dialog" role="document">
+  		    <div class="modal-content">
+  		      <div class="modal-header">
+  		        <h5 class="modal-title" id="myModalLabel">上传附件</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+  		      </div>
+  		      <div class="modal-body">
+  		        <p>上传文件大小最大：10MB</p>
+  						<p><a href="" class="btn btn-primary">选择文件</a></p>
+  		      </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary">添加</button>
+            </div>
+  		    </div>
+  		  </div>
+  		</div>
+      <!--提交审批-->
+  		<div class="modal fade" id="sub-ap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  		  <div class="modal-dialog" role="document">
+  		    <div class="modal-content">
+  		      <div class="modal-header">
+  		        <h5 class="modal-title" id="myModalLabel">提交审批</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+  		      </div>
+  		      <div class="modal-body">
+  		      	<h5>还没添加任何变更清单，无法提交。</h5>
+  		      	<h5>还没设置审批流程，无法提交。</h5>
+  		      	<h5>确认提交审批？</h5>
+  		      </div>
+  		      <div class="modal-footer">
+              <!--无法提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">好的</button>
+              <!--确认提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+              <button type="button" class="btn btn-primary" data-dismiss="modal">确认提交</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>
+</body>
+
+</html>

biangeng-new5.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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">
+</head>
+
+<body>
+  <div class="header">
+		<h1 class="logo"><a>变更管理-纵横变更管理系统</a></h1>
+    <div class="poj-name">
+      <span class="name">项目A</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">项目B</a>
+         <a href="#" class="dropdown-item">项目C</a>
+         <a href="#" class="dropdown-item">项目D</a>
+       </div>
+     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
+    </div>
+    <div class="poj-name">
+      <span class="name">WWUJ-1</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">WWUJ-2</a>
+         <a href="#" class="dropdown-item">WWUJ-3</a>
+         <a href="#" class="dropdown-item">WWUJ-4</a>
+       </div>
+     </div>
+    </div>
+			<div class="header-nav"></div>
+			<div class="header-user pull-right">
+				<div class="avatar btn-group">
+					<a class="dropdown-toggle" data-toggle="dropdown">
+						<span class="pic"><img src="img/avatar.png"></span>
+						<span>张三</span>
+						<span class="caret"></span>
+					</a>
+					<div class="dropdown-menu">
+					 <a href="account-info.html"  class="dropdown-item">账号资料</a>
+					 <a href="#"  class="dropdown-item">账号安全</a>
+					 <div class="dropdown-divider"></div>
+ 					 <a href="#"  class="dropdown-item">新手引导</a>
+					 <a href="#"  class="dropdown-item">帮助中心</a>
+					 <a href="#" class="dropdown-item">退出登录</a>
+				 </div>
+				</div>
+				<div class="msg">
+					<a>
+					<i class="fa fa-bell"></i><sup >0</sup>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<div class="main-nav">
+			<div class="nav-top">
+        <ul class="nav nav-pills flex-column bg-nav">
+          <li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
+          <li class="nav-item"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
+          <li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="taizhang.html">台帐分解</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-bg.html">台帐修订</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-jl.html">计量台帐</a></li>
+            </ul>
+          </li>
+          <li class="nav-item"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="jiliang.html">中间计量</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-list.html">计量审批</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-qi.html">期计量</a></li>
+            </ul>
+          </li>
+          <li class="nav-item active"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
+          <li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+        </ul>
+			</div>
+		</div>
+    <div class="main-panel">
+    			<div class="panel-content">
+    				<div class="panel-title fluid">
+    					<div class="title-main d-flex justify-content-between">
+    						<div>
+                  <ul class="nav nav-pills">
+										<li class="nav-item"><a class="nav-link" href="biangeng-new2.html">变更信息</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new3.html">变更清单</a></li>
+										<li class="nav-item"><a class="nav-link" href="biangeng-new4.html">附件</a></li>
+										<li class="nav-item"><a class="nav-link active" href="biangeng-new5.html">审批流程</a></li>
+									</ul>
+                </div>
+                <div>
+                  <a href="#sub-ap" data-toggle="modal" data-target="#sub-ap" class="btn btn-sm btn-primary pull-right">提交审批</a>
+                </div>
+              </div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <legend>审批流程<a href="#addshenpi" class="btn btn-outline-primary btn-sm pull-right" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> 添加审批人</a></legend>
+                <ul class="list-unstyled w-50">
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute"><i class="fa fa-flag-o"></i></span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">张一 <small class="text-muted">施工</small> </h5>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute">2</span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">赵二 <small class="text-muted">承包人</small> </h5>
+                      <a href="" class="btn btn-outline-danger btn-sm">移除</a>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute">2</span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">李四 <small class="text-muted">项目经理</small> </h5>
+                      <a href="" class="btn btn-outline-danger btn-sm">移除</a>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute"><i class="fa fa-flag-checkered"></i></span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">王五 <small class="text-muted">总监理工程师</small> </h5>
+                      <a href="" class="btn btn-outline-danger btn-sm">移除</a>
+                    </div>
+                  </li>
+                </ul>
+                <!--审批过程-->
+                <ul class="list-unstyled w-50">
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-success position-absolute"><i class="fa fa-flag-o"></i></span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">张一 <small class="text-muted">施工</small> </h5>
+                      <p>2018-01-08 <b class="text-success">上报审批</b></p>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-success position-absolute">2</span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">赵二 <small class="text-muted">承包人</small> </h5>
+                      <p>2018-01-08 <b class="text-success">审批通过</b> 审批意见内容</p>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute">3</span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">李四 <small class="text-muted">项目经理</small> </h5>
+                      <p><b class="text-warning">审批中</b></p>
+                    </div>
+                  </li>
+                  <li class="media mb-4">
+                    <span class="badge badge-pill badge-secondary position-absolute"><i class="fa fa-flag-checkered"></i></span>
+                    <img class="mr-3" src="img/avatar.png">
+                    <div class="media-body">
+                      <h5 class="mt-0 mb-1">王五 <small class="text-muted">总监理工程师</small> </h5>
+                    </div>
+                  </li>
+                </ul>
+
+    					</div>
+    				</div>
+    			</div>
+    		</div>
+      </div>
+      <!--添加审批人-->
+  		<div class="modal fade" id="addshenpi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  		  <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="input-group">
+  						  <input type="text" class="form-control" placeholder="请输入审批人名称">
+                <div class="input-group-append">
+                  <button class="btn btn-outline-secondary" type="button">搜索</button>
+                </div>
+  						</div>
+  						<div class="row" style="margin-top:25px;">
+  		        	<div class="col-md-4 alert alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions1" value="option1"> 赵七</label><div>承包人经办人</div></div></div>
+  		        	<div class="col-md-4 alert alert-success alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions1" value="option2" checked>钱八</label><div>承包人项目经理</div></div></div>
+  		        	<div class="col-md-4 alert alert-pnone"></div>
+  		        </div>
+  		        <h5>常用审批人</h5>
+  		        <div class="row">
+  		        	<div class="col-md-4 alert alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions" value="option1"> 张三</label><div>承包人经办人</div></div></div>
+  		        	<div class="col-md-4 alert alert-success alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions" value="option2" checked>李四</label><div>承包人项目经理</div></div></div>
+  		        	<div class="col-md-4 alert alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions" value="option3"> 王五</label><div>总监理工程师</div></div></div>
+  		        </div>
+  		        <div class="row">
+  		        	<div class="col-md-4 alert alert-pnone"><div class="radio"><label><input type="radio" name="inlineRadioOptions" value="option4"> 郑六</label><div>总监理工程师</div></div></div>
+  		        </div>
+  		      </div>
+  		      <div class="modal-footer">
+  		        <button type="button" class="btn btn-primary">添加</button>
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+  		      </div>
+  		    </div>
+  		  </div>
+  		</div>
+      <!--提交审批-->
+  		<div class="modal fade" id="sub-ap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  		  <div class="modal-dialog" role="document">
+  		    <div class="modal-content">
+  		      <div class="modal-header">
+  		        <h5 class="modal-title" id="myModalLabel">提交审批</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+  		      </div>
+  		      <div class="modal-body">
+  		      	<h5>还没添加任何变更清单，无法提交。</h5>
+  		      	<h5>还没设置审批流程，无法提交。</h5>
+  		      	<h5>确认提交审批？</h5>
+  		      </div>
+  		      <div class="modal-footer">
+              <!--无法提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">好的</button>
+              <!--确认提交-->
+  		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
+              <button type="button" class="btn btn-primary" data-dismiss="modal">确认提交</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>
+</body>
+
+</html>

biangeng.html

@@ -123,7 +123,7 @@
 									<tr><th width="10%">标段</th><th width="20%">变更令号</th><th width="30%">工程名称</th><th width="10%">变更类别</th><th width="10%">变更金额</th><th width="10%">操作</th></tr>
 									</thead>
 									<tbody>
-										<tr><td>LZTJ-1</td><td><a href="biangeng-detail.html">LZTJ-1标项目部发变更(2015)001号 （点我）</a></td><td>收费站出口右侧加宽段及K0+532基底换填</td><td>A类变更（设计变更）</td><td>101112.23</td><td><a href="biangeng-approval.html" class="btn btn-warning btn-sm">审批(点我)</a></td></tr>
+										<tr><td>LZTJ-1</td><td><a href=".html">LZTJ-1标项目部发变更(2015)001号 （点我）</a></td><td>收费站出口右侧加宽段及K0+532基底换填</td><td>A类变更（设计变更）</td><td>101112.23</td><td><a href="biangeng-approval.html" class="btn btn-warning btn-sm">审批(点我)</a></td></tr>
 										<tr><td>LZTJ-1</td><td><a href="">LZTJ-1标项目部发变更(2015)002号</a></td><td>路基基底换填</td><td>A类变更（设计变更）</td><td>191991.32</td><td><a href="" class="btn btn-warning btn-sm">审批</a></td></tr>
 										<tr><td>LZTJ-1</td><td><a href="">LZTJ-1标项目部发变更(2015)004号</a></td><td>土方运距</td><td>B类变更（施工措施变）</td><td>432664.96</td><td><a href="" class="btn btn-warning btn-sm">审批</a></td></tr>
 										<tr><td>LZTJ-1</td><td><a href="">LZTJ-1标项目部发变更(2015)005号</a></td><td>K0+440通道台背回填</td><td>C类变更（计划变更）</td><td>136515.46</td><td><a href="biangeng-new.html" class="btn btn-primary btn-sm">重新上报</a></td></tr>

biaoduan-detail.html

@@ -1,409 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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>
-</head>
-
-<body>
-  <div class="header">
-		<h1 class="logo"><a>主页-纵横变更管理系统</a></h1>
-    <div class="poj-name">
-      <span class="name">项目A</span>
-      <div class="btn-group">
-        <a class=" btn" data-toggle="dropdown" >
-          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
-        </a>
-        <div class="dropdown-menu">
-         <a href="#" class="dropdown-item">项目B</a>
-         <a href="#" class="dropdown-item">项目C</a>
-         <a href="#" class="dropdown-item">项目D</a>
-       </div>
-     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
-    </div>
-    <div class="poj-name">
-      <span class="name">标段管理</span>
-    </div>
-		<div class="header-box">
-			<div class="header-nav"></div>
-			<div class="header-user pull-right">
-				<div class="avatar btn-group">
-					<a class="dropdown-toggle" data-toggle="dropdown">
-						<span class="pic"><img src="img/avatar.png"></span>
-						<span>张三</span>
-						<span class="caret"></span>
-					</a>
-					<div class="dropdown-menu">
-					 <a href="#"  class="dropdown-item">账号资料</a>
-					 <a href="#"  class="dropdown-item">账号安全</a>
-					 <div class="dropdown-divider"></div>
-					 <a href="#"  class="dropdown-item">帮助中心</a>
-					 <a href="#" class="dropdown-item">退出登录</a>
-				 </div>
-				</div>
-				<div class="msg">
-					<a>
-					<i class="fa fa-bell"></i><sup >0</sup>
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="main">
-		<div class="main-nav">
-			<div class="nav-top">
-				<ul class="nav nav-pills flex-column bg-nav">
-					<li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
-					<li class="nav-item active"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
-					<li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
-            <ul class="sub-menu">
-              <li><a href="taizhang.html">台帐分解</a></li>
-            </ul>
-            <ul class="sub-menu">
-              <li><a href="taizhang-bg.html">台帐修订</a></li>
-            </ul>
-            <ul class="sub-menu">
-              <li><a href="taizhang-jl.html">计量台帐</a></li>
-            </ul>
-          </li>
-          <li class="nav-item"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
-            <ul class="sub-menu">
-              <li><a href="jiliang.html">中间计量</a></li>
-            </ul>
-            <ul class="sub-menu">
-              <li><a href="jiliang.html">计量审批</a></li>
-            </ul>
-            <ul class="sub-menu">
-              <li><a href="jiliang-qi.html">期计量</a></li>
-            </ul>
-          </li>					<li class="nav-item"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
-					<li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="main-panel">
-			<div class="panel-content">
-				<div class="panel-title fluid">
-					<div class="title-main  d-flex justify-content-between">
-            <div>
-              <div class="btn-group">
-                <a href="biaoduan.html">返回 </a>
-              </div>
-            </div>
-            <div>
-              <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-outline-primary btn-sm">编辑</a> <a href="#del-bd" data-toggle="modal" data-target="#del-bd" class="btn btn-outline-danger btn-sm">删除</a>
-            </div>
-          </div>
-				</div>
-				<div class="content-wrap">
-					<div class="c-body">
-            <table class="table table-bordered table-sm">
-              <thead><th width="300">名称</th><th width="120">标段类型</th><th width="120">审批状态</th><th width="120">创建时间</th><th>计量进度</th></thead>
-              <tr><td>WWUJ-2</td><td>土建标</td><td>审批中</td><td>2017-12-1</td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止本期累计完成：￥731,121,121.00">45%</div>
-                    <div class="progress-bar bg-info" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
-                    <div class="progress-bar bg-gray" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
-                  </div>
-                </td>
-              </tr>
-            </table>
-            <table class="table table-bordered table-sm">
-              <thead>
-                <th width="120">计量期数</th>
-                <th>0号台帐合同</th>
-                <th>本期完成</th>
-                <th>截止本期合同</th>
-                <th>截止本期变更</th>
-                <th>截止本期完成</th>
-                <th>截止上期完成</th>
-                <th>本期应付</th>
-              </thead>
-              <tr>
-                <td>15 <a href="jiliang-qi.html" target="_balnk"><i class="fa fa-ellipsis-h"></i></a></td>
-                <td>0</td>
-                <td>0</td>
-                <td>0</td>
-                <td>0</td>
-                <td>0</td>
-                <td>0</td>
-                <td>0</td>
-              </tr>
-            </table>
-            <!--图表1-->
-            <div id="chartContainer1" style="height: 400px; width: 100%;" class="mt-5">
-            </div>
-            <!--图表3-->
-            <div id="chartContainer3" style="height: 400px; width: 100%;" class="mt-5">
-            </div>
-            <!--图表2-->
-            <div id="chartContainer2" style="height: 600px; width: 100%;">
-            </div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-  <!--弹出编辑标段-->
-  <div class="modal fade" id="add-bd" data-backdrop="static">
-      <div class="modal-dialog" role="document">
-          <div class="modal-content">
-              <div class="modal-header">
-                  <h5 class="modal-title">编辑标段</h5>
-              </div>
-              <div class="modal-body">
-                <div class="form-group">
-                  <label>标段名称<b class="text-danger">*</b></label>
-                  <input class="form-control"  placeholder="输入标段名称" type="text">
-                </div>
-                <div class="form-group">
-                  <label>标段类型</label>
-                  <select class="form-control">
-                    <option>土建标</option>
-                    <option>XX标</option>
-                    <option>YY标</option>
-                  </select>
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
-                <button type="button" class="btn btn-primary">确定修改</button>
-              </div>
-          </div>
-      </div>
-  </div>
-  <!--删除标段-->
-  <div class="modal fade" id="del-bd" data-backdrop="static">
-      <div class="modal-dialog" role="document">
-          <div class="modal-content">
-              <div class="modal-header">
-                  <h5 class="modal-title">确认删除标段</h5>
-              </div>
-              <div class="modal-body">
-                <h5>删除后，数据无法恢复，请谨慎操作。</h5>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
-                <button type="button" class="btn btn-danger">确定删除</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>
-</body>
-<script type="text/javascript">
-                //1 标段期数计量进度//
-                var myChart = echarts.init(document.getElementById('chartContainer1'));
-                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: 'axis'
-                    },
-                    calculable : true,
-                    legend: {
-                        data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
-                    },
-                    dataZoom : {
-                        show : true,
-                        start :0,
-                        end : 100
-                    },
-                    xAxis : [
-                        {
-                            type : 'category',
-                            splitLine : {show :true},
-                            data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
-                        }
-                    ],
-                    yAxis : [
-                        {
-                            type : 'value',
-                            position: 'left',
-                            splitArea : {show : true}
-                        },
-                        {
-                            type : 'value',
-                            name:'完成度',
-                            axisLabel : {
-                                formatter: '{value} %'
-                            },
-                            position: 'right',
-                            splitLine : {show :false},
-                            splitArea : {show : false}
-                        }
-                    ],
-                    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);
-                //1 标段期数计量进度//
-                //2 期数组成//
-                var myChart = echarts.init(document.getElementById('chartContainer2'));
-                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',
-                          radius : '80%',
-                          center: ['50%','50%'],
-                          data:[
-                              {value:7814964.00, name:'第一期'},
-                              {value:6043186.10, name:'第二期'},
-                              {value:6917475.00, name:'第三期'},
-                              {value:7634982.00, name:'第四期'},
-                              {value:7634982.00, name:'第五期'},
-                              {value:7634982.00, name:'第六期'},
-                              {value:7634982.00, name:'第七期'}
-                          ]
-                      }
-                  ]
-                };
-                // 为echarts对象加载数据
-                myChart.setOption(option);
-                //2 期数组成//
-                //3 标段计量分布//
-                var myChart = echarts.init(document.getElementById('chartContainer3'));
-                var option = {
-                          color:['#ff6666','#3cb371'],
-                          title : {
-                              text: '期月进度'
-                          },
-                          tooltip : {
-                              trigger: 'axis',
-                              formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
-                          },
-                          legend: {
-                              data:['累计完成','本月完成']
-                          },
-                  dataZoom : {
-                      show : true,
-                      start :50,
-                      end : 100
-                  },
-                  xAxis : [
-                      {
-                                                type : 'category',
-                                                boundaryGap : true,
-                          data : [
-                              '2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08','2017-09'
-                          ]
-                      }
-                  ],
-                  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>
-</html>

biaoduan.html

@@ -93,6 +93,12 @@
 				<div class="panel-title fluid">
 					<div class="title-main  d-flex justify-content-between">
             <div>
+              <div class="btn-group mr-2">
+                  <select class="form-control form-control-sm m-0">
+                    <option>标段类型筛选</option>
+                    <option>土建标</option>
+                  </select>
+              </div>
               <div class="btn-group">
                 <div class="form-check-inline">
                   <label class="form-check-label">
@@ -102,10 +108,12 @@
                 </div>
               </div>
               <div class="btn-group">
-                  <select class="form-control form-control-sm m-0">
-                    <option>标段类型筛选</option>
-                    <option>土建标</option>
-                  </select>
+                <div class="form-check-inline">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox">
+                    管理标段
+                  </label>
+                </div>
               </div>
             </div>
             <div>
@@ -115,6 +123,17 @@
 				</div>
 				<div class="content-wrap">
 					<div class="c-body">
+            <!--图表-->
+            <div class="row mb-5">
+              <div class="col-4">
+                <!--图表1-->
+                <div id="chartContainer1" style="width:100%;height:300px"></div>
+              </div>
+              <div class="col-8">
+                <!--图表2-->
+                <div id="chartContainer2" style="width:100%;height:300px"></div>
+              </div>
+            </div>
             <!--默认-->
             <table class="table table-bordered table-sm">
               <thead>
@@ -131,9 +150,9 @@
                 <th>本期应付</th>
               </thead>
               <tr>
-                <td><a href="biaoduan-detail.html">WWUJ-1</a></td>
+                <td><a href="jiliang-qi.html">WWUJ-1</a></td>
                 <td>土建标</td>
-                <td>15</td>
+                <td>共15期</td>
                 <td>审批中</td>
                 <td>0</td>
                 <td>0</td>
@@ -144,9 +163,9 @@
                 <td>0</td>
               </tr>
               <tr>
-                <td><a href="biaoduan-detail.html">WWUJ-2</a></td>
+                <td><a href="jiliang-qi.html">WWUJ-2</a></td>
                 <td>土建标</td>
-                <td>15</td>
+                <td>共15期</td>
                 <td>审批中</td>
                 <td>0</td>
                 <td>0</td>
@@ -157,9 +176,9 @@
                 <td>0</td>
               </tr>
               <tr>
-                <td><a href="biaoduan-detail.html">WWUJ-3</a></td>
+                <td><a href="jiliang-qi.html">WWUJ-3</a></td>
                 <td>土建标</td>
-                <td>15</td>
+                <td>共15期</td>
                 <td>审批中</td>
                 <td>0</td>
                 <td>0</td>
@@ -180,9 +199,9 @@
                   <th>截止本期累计完成/本期完成/未完成</th>
                 </thead>
                 <tr>
-                  <td><a href="biaoduan-detail.html">WWUJ-1</a></td>
+                  <td><a href="jiliang-qi.html">WWUJ-1</a></td>
                   <td>土建标</td>
-                  <td>15</td>
+                  <td>共15期</td>
                   <td>￥5,000,000.00</td>
                   <td>
                     <div class="progress">
@@ -193,9 +212,9 @@
                   </td>
                 </tr>
                 <tr>
-                  <td><a href="biaoduan-detail.html">WWUJ-2</a></td>
+                  <td><a href="jiliang-qi.html">WWUJ-2</a></td>
                   <td>土建标</td>
-                  <td>15</td>
+                  <td>共15期</td>
                   <td>￥5,000,000.00</td>
                   <td>
                     <div class="progress">
@@ -206,9 +225,9 @@
                   </td>
                 </tr>
                 <tr>
-                  <td><a href="biaoduan-detail.html">WWUJ-3</a></td>
+                  <td><a href="jiliang-qi.html">WWUJ-3</a></td>
                   <td>土建标</td>
-                  <td>15</td>
+                  <td>共15期</td>
                   <td>￥5,000,000.00</td>
                   <td>
                     <div class="progress">
@@ -219,17 +238,40 @@
                   </td>
                 </tr>
               </table>
-            <!--按标段类型筛选后，增加显示图表-->
-            <div class="row mt-5">
-              <div class="col-4">
-                <!--图表1-->
-                <div id="chartContainer1" style="width:100%;height:400px"></div>
-              </div>
-              <div class="col-8">
-                <!--图表2-->
-                <div id="chartContainer2" style="width:100%;height:400px"></div>
-              </div>
-            </div>
+              <!--管理标段-->
+              <table class="table table-bordered table-sm">
+                  <thead>
+                    <th>名称</th>
+                    <th width="120">标段类型</th>
+                    <th width="120">完成期数</th>
+                    <th>操作</th>
+                  </thead>
+                  <tr>
+                    <td><a href="jiliang-qi.html">WWUJ-3</a></td>
+                    <td>土建标</td>
+                    <td>共15期</td>
+                    <td>
+                      <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-outline-primary btn-sm">编辑</a>
+                      <a href="#del-bd" data-toggle="modal" data-target="#del-bd" class="btn btn-outline-danger btn-sm">删除</a>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td><a href="jiliang-qi.html">WWUJ-2</a></td>
+                    <td>土建标</td>
+                    <td>共15期</td>
+                    <td>
+                      <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-outline-primary btn-sm">编辑</a>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td><a href="jiliang-qi.html">WWUJ-1</a></td>
+                    <td>土建标</td>
+                    <td>共15期</td>
+                    <td>
+                      <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-outline-primary btn-sm">编辑</a>
+                    </td>
+                  </tr>
+                </table>
           </div>
 				</div>
 			</div>
@@ -263,6 +305,51 @@
           </div>
       </div>
   </div>
+  <!--弹出编辑标段-->
+  <div class="modal fade" id="add-bd" data-backdrop="static">
+      <div class="modal-dialog" role="document">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title">编辑标段</h5>
+              </div>
+              <div class="modal-body">
+                <div class="form-group">
+                  <label>标段名称<b class="text-danger">*</b></label>
+                  <input class="form-control"  placeholder="输入标段名称" type="text">
+                </div>
+                <div class="form-group">
+                  <label>标段类型</label>
+                  <select class="form-control">
+                    <option>土建标</option>
+                    <option>XX标</option>
+                    <option>YY标</option>
+                  </select>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary">确定修改</button>
+              </div>
+          </div>
+      </div>
+  </div>
+  <!--删除标段-->
+  <div class="modal fade" id="del-bd" data-backdrop="static">
+      <div class="modal-dialog" role="document">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h5 class="modal-title">确认删除标段</h5>
+              </div>
+              <div class="modal-body">
+                <h5>删除后，数据无法恢复，请谨慎操作。</h5>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-danger">确定删除</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>
@@ -310,7 +397,7 @@
                 var option = {
                           color:['#6699FF','#3cb371'],
                           title : {
-                              text: '土建标月进度'
+                              text: '月进度'
                           },
                           tooltip : {
                               trigger: 'axis',

css/main.css

@@ -348,6 +348,13 @@ body {
   padding:15px;
   background:#fff;
 }
+.right-nav{
+  width:18px
+}
+.right-nav .nav-link.active{
+  background: #fff;
+  color:#495057
+}
 .form-group .necessary{
   font-size:18px;
   color:#f90000

jiliang-list.html

@@ -118,13 +118,13 @@
                 <div class="tab-content">
                   <table class="table table-bordered">
                     <thead>
-                      <tr><th>计量编号</th><th>计量金额</th><th>计量月份</th><th>计量期数</th><th>状态</th><th>当前处理人</th></tr>
+                      <tr><th>计量编号</th><th>计量金额</th><th>计量月份</th><th>所属计量期</th><th>状态</th><th>当前处理人</th></tr>
                     </thead>
                     <tbody>
-                      <tr><td><a href="jiliang.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>15</td><td><span class="text-muted">待上报</span></td><td>监理-张三</td></tr>
-                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>15</td><td><span class="text-warning">审批中</span></td><td>监理-张三</td></tr>
-                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>15</td><td><a href="jiliang-detail.html" class="btn-primary btn-sm">审批</a></td><td>监理-张三</td></tr>
-                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201709</a></td><td>34234234.00</td><td>201710</td><td>14</td><td><span class="text-success">审批完成</span></td><td>业主-王五</td></tr>
+                      <tr><td><a href="jiliang.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>第 15 期</td><td><span class="text-muted">待上报</span></td><td>监理-张三</td></tr>
+                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>第 15 期</td><td><span class="text-warning">审批中</span></td><td>监理-张三</td></tr>
+                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>第 15 期</td><td><a href="jiliang-detail.html" class="btn-primary btn-sm">审批</a></td><td>监理-张三</td></tr>
+                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201709</a></td><td>34234234.00</td><td>201710</td><td>第 14 期</td><td><span class="text-success">审批完成</span></td><td>业主-王五</td></tr>
                     </tobody>
                   </table>
                 </div>

jiliang-qi-detail.html

@@ -0,0 +1,493 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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>
+</head>
+
+<body>
+  <div class="header">
+		<h1 class="logo"><a>计量管理-纵横变更管理系统</a></h1>
+    <div class="poj-name">
+      <span class="name">项目A</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">项目B</a>
+         <a href="#" class="dropdown-item">项目C</a>
+         <a href="#" class="dropdown-item">项目D</a>
+       </div>
+     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
+    </div>
+    <div class="poj-name">
+      <span class="name">WWUJ-1</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">WWUJ-2</a>
+         <a href="#" class="dropdown-item">WWUJ-3</a>
+         <a href="#" class="dropdown-item">WWUJ-4</a>
+       </div>
+     </div>
+    </div>
+		<div class="header-box">
+			<div class="header-nav"></div>
+			<div class="header-user pull-right">
+				<div class="avatar btn-group">
+					<a class="dropdown-toggle" data-toggle="dropdown">
+						<span class="pic"><img src="img/avatar.png"></span>
+						<span>张三</span>
+						<span class="caret"></span>
+					</a>
+					<div class="dropdown-menu">
+					 <a href="account-info.html"  class="dropdown-item">账号资料</a>
+					 <a href="#"  class="dropdown-item">账号安全</a>
+					 <div class="dropdown-divider"></div>
+ 					 <a href="#"  class="dropdown-item">新手引导</a>
+					 <a href="#"  class="dropdown-item">帮助中心</a>
+					 <a href="#" class="dropdown-item">退出登录</a>
+				 </div>
+				</div>
+				<div class="msg">
+					<a>
+					<i class="fa fa-bell"></i><sup >0</sup>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<div class="main-nav">
+			<div class="nav-top">
+				<ul class="nav nav-pills flex-column bg-nav">
+					<li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
+					<li class="nav-item"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
+					<li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="taizhang.html">台帐分解</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-bg.html">台帐修订</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-jl.html">计量台帐</a></li>
+            </ul>
+          </li>
+          <li class="nav-item active"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="jiliang.html">中间计量</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-list.html">计量审批</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-qi.html">期计量</a></li>
+            </ul>
+          </li>
+          <li class="nav-item"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
+					<li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+				</ul>
+			</div>
+		</div>
+    <div class="main-panel">
+    			<div class="panel-content">
+    				<div class="panel-title fluid">
+    					<div class="title-main d-flex justify-content-between">
+                <div>
+                  <ul class="nav nav-pills">
+										<li class="nav-item">
+											<a class="nav-link" href="jiliang-qi.html">返回</a>
+										</li>
+										<li class="nav-item">
+											<a class="nav-link active" href="jiliang-qi-detail.html">中间计量表</a>
+										</li>
+                    <li class="nav-item"><a class="nav-link" href="jiliang-qi-detail2.html">本期计量台帐</a></li>
+                    <li class="nav-item"><a class="nav-link" href="jiliang-qi-detail3.html">合同支付</a></li>
+									</ul>
+                </div>
+                <div>
+                  <a href="#sub-sp" data-toggle="modal" data-target="#sub-sp" class="btn btn-primary btn-sm pull-right">上报审批</a>
+                  <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm pull-right">审批中</a>
+                  <!--审批-->
+                  <a href="#sp-done" data-toggle="modal" data-target="#sp-done" class="btn btn-success btn-sm pull-right">审批通过</a>
+                  <a href="#sp-back" data-toggle="modal" data-target="#sp-back" class="btn btn-warning btn-sm pull-right">审批退回</a>                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <legend id="qingdan">
+  								<a href="#addzj" data-target="#addzj" class="btn btn-outline-primary btn-sm pull-right" data-toggle="modal">添加中间计量表</a>
+                  中间计量表
+                </legend>
+                <table class="table table-bordered">
+                  <thead>
+                    <tr>
+                      <th>编号</th>
+                      <th class="text-center">计量金额</th>
+                      <th class="text-center">计量月份</th>
+                      <th class="text-center">状态</th>
+                      <th class="text-center">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td><a href="jiliang.html">WWUJ-2-201710</a></td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-center">201710</td>
+                      <td><span class="text-warning">审批中</span></td>
+                      <td><a href="#" class="btn btn-outline-danger btn-sm">移除</a></td>
+                    </tr>
+                    <tr>
+                      <td><a href="jiliang.html">WWUJ-2-201710</a></td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-center">201710</td>
+                      <td><span class="text-success">审批完成</span></td>
+                      <td><a href="#" class="btn btn-outline-danger btn-sm">移除</a></td>
+                    </tr>
+                    <tr>
+                      <td><a href="jiliang.html">WWUJ-2-201709</a></td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-center">201710</td>
+                      <td><span class="text-success">审批完成</span></td>
+                      <td><a href="#" class="btn btn-outline-danger btn-sm">移除</a></td>
+                    </tr>
+                  </tbody>
+                </table>
+    					</div>
+    				</div>
+    			</div>
+    		</div>
+      </div>
+      <!--上报审批-->
+      <div class="modal fade" id="sub-sp" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">上报审批</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="form-group">
+                      <label>搜索审批人</label>
+                      <div class="input-group">
+                        <input class="form-control" placeholder="请输入姓名进行检索" type="text">
+                        <div class="input-group-append">
+                          <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card border-primary">
+                      <div class="card-body">
+                        <h5 class="card-title">
+                          <a href="#" class="btn btn-primary btn-sm pull-right">添加</a>张三
+                        </h5>
+                        <h6 class="card-subtitle mb-2 text-muted">监理</h6>
+                        <p class="card-text">XXXXX公司</p>
+                      </div>
+                    </div>
+                    <div class="card mt-3">
+                      <div class="card-header">
+                        审批流程
+                      </div>
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>1 张三  <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>2 王五 <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>3 李四 <small class="text-muted">监理</small></li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-primary">确认上报</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批流程/结果-->
+      <div class="modal fade" id="sp-list" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批流程</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <p class="card-text"></p>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批通过-->
+      <div class="modal fade" id="sp-done" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批通过</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-success" >确认通过</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批退回-->
+      <div class="modal fade" id="sp-back" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批退回</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                           <div class="alert alert-warning">审批退回，将直接退回给上报人。</data-min-view>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-warning" >确认退回</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--添加中间计量-->
+      <div class="modal fade" id="addzj" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">添加中间计量表</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div style="height:400px;overflow-y:auto">
+  		            <table class="table table-striped table-bordered table-condensed">
+  		              <thead><tr><th>编号</th><th>计量金额</th><th>计量月份</th><th>状态</th><th>选择</th></tr></thead>
+  		              <tbody>
+  		                <tr>
+  		                  <td>WWUJ-2-201710</td>
+  		                  <td>34234234.00</td>
+  		                  <td>201710</td>
+  		                  <td><span class="text-warning">审批中</span></td>
+  		                  <td><input type="checkbox"></td>
+  		                </tr>
+  		                <tr>
+  		                  <td>WWUJ-2-201710</td>
+  		                  <td>34234234.00</td>
+  		                  <td>201710</td>
+  		                  <td><span class="text-success">审批完成</span></td>
+  		                  <td><input type="checkbox"></td>
+  		                </tr>
+  		              </tbody>
+  		            </table>
+  		          </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" >确认添加</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</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'],
+    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 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                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: ['45%', 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>
+
+</html>

jiliang-qi-detail2.html

@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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>
+</head>
+
+<body>
+  <div class="header">
+		<h1 class="logo"><a>计量管理-纵横变更管理系统</a></h1>
+    <div class="poj-name">
+      <span class="name">项目A</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">项目B</a>
+         <a href="#" class="dropdown-item">项目C</a>
+         <a href="#" class="dropdown-item">项目D</a>
+       </div>
+     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
+    </div>
+    <div class="poj-name">
+      <span class="name">WWUJ-1</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">WWUJ-2</a>
+         <a href="#" class="dropdown-item">WWUJ-3</a>
+         <a href="#" class="dropdown-item">WWUJ-4</a>
+       </div>
+     </div>
+    </div>
+		<div class="header-box">
+			<div class="header-nav"></div>
+			<div class="header-user pull-right">
+				<div class="avatar btn-group">
+					<a class="dropdown-toggle" data-toggle="dropdown">
+						<span class="pic"><img src="img/avatar.png"></span>
+						<span>张三</span>
+						<span class="caret"></span>
+					</a>
+					<div class="dropdown-menu">
+					 <a href="account-info.html"  class="dropdown-item">账号资料</a>
+					 <a href="#"  class="dropdown-item">账号安全</a>
+					 <div class="dropdown-divider"></div>
+ 					 <a href="#"  class="dropdown-item">新手引导</a>
+					 <a href="#"  class="dropdown-item">帮助中心</a>
+					 <a href="#" class="dropdown-item">退出登录</a>
+				 </div>
+				</div>
+				<div class="msg">
+					<a>
+					<i class="fa fa-bell"></i><sup >0</sup>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<div class="main-nav">
+			<div class="nav-top">
+				<ul class="nav nav-pills flex-column bg-nav">
+					<li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
+					<li class="nav-item"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
+					<li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="taizhang.html">台帐分解</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-bg.html">台帐修订</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-jl.html">计量台帐</a></li>
+            </ul>
+          </li>
+          <li class="nav-item active"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="jiliang.html">中间计量</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-list.html">计量审批</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-qi.html">期计量</a></li>
+            </ul>
+          </li>
+          <li class="nav-item"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
+					<li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+				</ul>
+			</div>
+		</div>
+    <div class="main-panel">
+    			<div class="panel-content">
+    				<div class="panel-title fluid">
+    					<div class="title-main d-flex justify-content-between">
+                <div>
+                  <ul class="nav nav-pills">
+										<li class="nav-item">
+											<a class="nav-link" href="jiliang-qi.html">返回</a>
+										</li>
+										<li class="nav-item">
+											<a class="nav-link" href="jiliang-qi-detail.html">中间计量表</a>
+										</li>
+										<li class="nav-item"><a class="nav-link active" href="jiliang-qi-detail2.html">本期计量台帐</a></li>
+                    <li class="nav-item"><a class="nav-link" href="jiliang-qi-detail3.html">合同支付</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <a href="#sub-sp" data-toggle="modal" data-target="#sub-sp" class="btn btn-primary btn-sm pull-right">上报审批</a>
+                  <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm pull-right">审批中</a>
+                  <!--审批-->
+                  <a href="#sp-done" data-toggle="modal" data-target="#sp-done" class="btn btn-success btn-sm pull-right">审批通过</a>
+                  <a href="#sp-back" data-toggle="modal" data-target="#sp-back" class="btn btn-warning btn-sm pull-right">审批退回</a>                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+              <div class="c-header p-0"></div>
+    					<div class="c-body">
+                <div class="sjs-height-1">
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th rowspan="2">1</th>
+                        <th rowspan="2">项目节编号</th>
+                        <th rowspan="2">清单编号</th>
+                        <th rowspan="2">名称</th>
+                        <th rowspan="2">单位</th>
+                        <th rowspan="2">单价</th>
+                        <th colspan="2">0号台帐合同</th>
+                        <th colspan="2">本期合同计量</th>
+                        <th colspan="3">本期数量变更计量</th>
+                        <th colspan="2">本期完成计量</th>
+                        <th colspan="2">截止本期合同计量</th>
+                        <th colspan="2">截止本期数量变更</th>
+                        <th colspan="2">截止本期完成计量</th>
+                        <th rowspan="2">图（册）号</th>
+                        <th rowspan="2">累计完成率(%)</th>
+                        <th rowspan="2">备注</th>
+                      </tr>
+                      <tr>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>变更令</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                      </tr>
+                    </thead>
+                  </table>
+                </div>
+    					</div>
+    				</div>
+    			</div>
+    		</div>
+      </div>
+      <!--上报审批-->
+      <div class="modal fade" id="sub-sp" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">上报审批</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="form-group">
+                      <label>搜索审批人</label>
+                      <div class="input-group">
+                        <input class="form-control" placeholder="请输入姓名进行检索" type="text">
+                        <div class="input-group-append">
+                          <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card border-primary">
+                      <div class="card-body">
+                        <h5 class="card-title">
+                          <a href="#" class="btn btn-primary btn-sm pull-right">添加</a>张三
+                        </h5>
+                        <h6 class="card-subtitle mb-2 text-muted">监理</h6>
+                        <p class="card-text">XXXXX公司</p>
+                      </div>
+                    </div>
+                    <div class="card mt-3">
+                      <div class="card-header">
+                        审批流程
+                      </div>
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>1 张三  <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>2 王五 <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>3 李四 <small class="text-muted">监理</small></li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-primary">确认上报</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批流程/结果-->
+      <div class="modal fade" id="sp-list" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批流程</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <p class="card-text"></p>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批通过-->
+      <div class="modal fade" id="sp-done" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批通过</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-success" >确认通过</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批退回-->
+      <div class="modal fade" id="sp-back" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批退回</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                           <div class="alert alert-warning">审批退回，将直接退回给上报人。</data-min-view>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-warning" >确认退回</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--添加中间计量-->
+      <div class="modal fade" id="addzj" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">添加中间计量表</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div style="height:400px;overflow-y:auto">
+  		            <table class="table table-striped table-bordered table-condensed">
+  		              <thead><tr><th>编号</th><th>计量金额</th><th>计量月份</th><th>状态</th><th>选择</th></tr></thead>
+  		              <tbody>
+  		                <tr>
+  		                  <td>WWUJ-2-201710</td>
+  		                  <td>34234234.00</td>
+  		                  <td>201710</td>
+  		                  <td><span class="text-warning">审批中</span></td>
+  		                  <td><input type="checkbox"></td>
+  		                </tr>
+  		                <tr>
+  		                  <td>WWUJ-2-201710</td>
+  		                  <td>34234234.00</td>
+  		                  <td>201710</td>
+  		                  <td><span class="text-success">审批完成</span></td>
+  		                  <td><input type="checkbox"></td>
+  		                </tr>
+  		              </tbody>
+  		            </table>
+  		          </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" >确认添加</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</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'],
+    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 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                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: ['45%', 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>
+    <script type="text/javascript">  autoFlashHeight();</script>
+</body>
+
+</html>

jiliang-qi-detail3.html

@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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>
+</head>
+
+<body>
+  <div class="header">
+		<h1 class="logo"><a>计量管理-纵横变更管理系统</a></h1>
+    <div class="poj-name">
+      <span class="name">项目A</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">项目B</a>
+         <a href="#" class="dropdown-item">项目C</a>
+         <a href="#" class="dropdown-item">项目D</a>
+       </div>
+     </div><a href="settings-poj.html" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i class="fa fa-cogs"></i></a>
+    </div>
+    <div class="poj-name">
+      <span class="name">WWUJ-1</span>
+      <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown" >
+          <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+         <a href="#" class="dropdown-item">WWUJ-2</a>
+         <a href="#" class="dropdown-item">WWUJ-3</a>
+         <a href="#" class="dropdown-item">WWUJ-4</a>
+       </div>
+     </div>
+    </div>
+		<div class="header-box">
+			<div class="header-nav"></div>
+			<div class="header-user pull-right">
+				<div class="avatar btn-group">
+					<a class="dropdown-toggle" data-toggle="dropdown">
+						<span class="pic"><img src="img/avatar.png"></span>
+						<span>张三</span>
+						<span class="caret"></span>
+					</a>
+					<div class="dropdown-menu">
+					 <a href="account-info.html"  class="dropdown-item">账号资料</a>
+					 <a href="#"  class="dropdown-item">账号安全</a>
+					 <div class="dropdown-divider"></div>
+ 					 <a href="#"  class="dropdown-item">新手引导</a>
+					 <a href="#"  class="dropdown-item">帮助中心</a>
+					 <a href="#" class="dropdown-item">退出登录</a>
+				 </div>
+				</div>
+				<div class="msg">
+					<a>
+					<i class="fa fa-bell"></i><sup >0</sup>
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="main">
+		<div class="main-nav">
+			<div class="nav-top">
+				<ul class="nav nav-pills flex-column bg-nav">
+					<li class="nav-item"><a href="dashboard.html"title="代办事项"><i class="fa fa-dashboard"></i> 代办事项</a></li>
+					<li class="nav-item"><a href="biaoduan.html"title="标段管理"><i class="fa fa-list-ul"></i> 标段管理</a></li>
+					<li class="nav-item"><a href="javascript:void(0);"title="台帐管理"><i class="fa fa-list-alt"></i> 台帐管理 <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="taizhang.html">台帐分解</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-bg.html">台帐修订</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="taizhang-jl.html">计量台帐</a></li>
+            </ul>
+          </li>
+          <li class="nav-item active"><a href="javascript:void(0);"title="计量管理"><i class="fa fa-calendar-check-o"></i> 计量管理  <i class="fa fa-angle-down pull-right menu-arrow"></i></a>
+            <ul class="sub-menu">
+              <li><a href="jiliang.html">中间计量</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-list.html">计量审批</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="jiliang-qi.html">期计量</a></li>
+            </ul>
+          </li>
+          <li class="nav-item"><a href="biangeng.html"title="变更管理"><i class="fa fa-retweet"></i> 变更管理</a></li>
+					<li class="nav-item"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+				</ul>
+			</div>
+		</div>
+    <div class="main-panel">
+    			<div class="panel-content">
+    				<div class="panel-title fluid">
+    					<div class="title-main d-flex justify-content-between">
+                <div>
+                  <ul class="nav nav-pills">
+										<li class="nav-item">
+											<a class="nav-link" href="jiliang-qi.html">返回</a>
+										</li>
+										<li class="nav-item">
+											<a class="nav-link" href="jiliang-qi-detail.html">中间计量表</a>
+										</li>
+										<li class="nav-item"><a class="nav-link" href="jiliang-qi-detail2.html">本期计量台帐</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="jiliang-qi-detail3.html">合同支付</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <a href="#sub-sp" data-toggle="modal" data-target="#sub-sp" class="btn btn-primary btn-sm pull-right">上报审批</a>
+                  <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm pull-right">审批中</a>
+                  <!--审批-->
+                  <a href="#sp-done" data-toggle="modal" data-target="#sp-done" class="btn btn-success btn-sm pull-right">审批通过</a>
+                  <a href="#sp-back" data-toggle="modal" data-target="#sp-back" class="btn btn-warning btn-sm pull-right">审批退回</a>                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+              <div class="c-header p-0"></div>
+    					<div class="c-body">
+                <div class="row">
+                  <div class="col-8">
+                    <div class="sjs-height-1">
+                      <div class="form-group row">
+                        <label class="col-sm-2 col-form-label">表达式</label>
+                        <div class="col-sm-10">
+                          <input type="text" class="form-control">
+                        </div>
+                      </div>
+                      <table class="table table-bordered">
+                          <tr><th></th><th>名称</th><th>扣款</th><th>本期金额（表达式）</th><th>累计金额</th><th>起扣金额</th><th>付（扣）款限额</th></tr>
+                          <tr><td>1</td><td>本期应付</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+                          <tr><td>2</td><td>本期实付</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+                          <tr><td>3</td><td>本期完成计量</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+                          <tr><td>4</td><td>质量保证金</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+                          <tr><td>5</td><td>扣回开工预付款</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+                          <tr><td>6</td><td>扣回材料预付款</td><td><input type="checkbox"></td><td></td><td></td><td></td><td></td></tr>
+
+                      </table>
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <div class="sjs-height-1">
+                      <table class="table table-bordered">
+                        <tr><th></th><th>可选基数</th><th>计算代号</th></tr>
+                        <tr><td>1</td><td>签约合同价</td><td>htj</td></tr>
+                        <tr><td>2</td><td>签约开工预付款</td><td>kgyfk</td></tr>
+                        <tr><td>3</td><td>签约材料预付款</td><td>clyfk</td></tr>
+                        <tr><td>4</td><td>本期完成计量</td><td>bqwc</td></tr>
+                        <tr><td>5</td><td>100章本期完成计量</td><td>ybbqwc</td></tr>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+    					</div>
+    				</div>
+    			</div>
+    		</div>
+      </div>
+      <!--上报审批-->
+      <div class="modal fade" id="sub-sp" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">上报审批</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="form-group">
+                      <label>搜索审批人</label>
+                      <div class="input-group">
+                        <input class="form-control" placeholder="请输入姓名进行检索" type="text">
+                        <div class="input-group-append">
+                          <button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="card border-primary">
+                      <div class="card-body">
+                        <h5 class="card-title">
+                          <a href="#" class="btn btn-primary btn-sm pull-right">添加</a>张三
+                        </h5>
+                        <h6 class="card-subtitle mb-2 text-muted">监理</h6>
+                        <p class="card-text">XXXXX公司</p>
+                      </div>
+                    </div>
+                    <div class="card mt-3">
+                      <div class="card-header">
+                        审批流程
+                      </div>
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>1 张三  <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>2 王五 <small class="text-muted">监理</small></li>
+                        <li class="list-group-item"><a href="" class="text-danger pull-right">移除</a>3 李四 <small class="text-muted">监理</small></li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-primary">确认上报</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批流程/结果-->
+      <div class="modal fade" id="sp-list" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批流程</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <p class="card-text"></p>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批通过-->
+      <div class="modal fade" id="sp-done" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批通过</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-success" >确认通过</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                  </div>
+              </div>
+          </div>
+      </div>
+      <!--审批退回-->
+      <div class="modal fade" id="sp-back" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批退回</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <div class="form-group">
+                             <label>审批意见<b class="text-danger">*</b></label>
+                             <textarea class="form-control" ></textarea>
+                           </div>
+                           <div class="alert alert-warning">审批退回，将直接退回给上报人。</data-min-view>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-warning" >确认退回</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</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'],
+            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 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                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: ['45%', 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>
+    <script type="text/javascript">  autoFlashHeight();</script>
+</body>
+
+</html>

jiliang-qi.html

@@ -9,6 +9,7 @@
     <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>
 </head>
 
 <body>
@@ -104,52 +105,235 @@
     				<div class="panel-title fluid">
     					<div class="title-main d-flex justify-content-between">
                 <div>
-                  <select class="form-control form-control-sm">
-                    <option>全部</option>
-                    <option>编制中</option>
-                    <option>审批中</option>
-                    <option>审批完成</option>
-                  </select>
                 </div>
                 <div>
-		              <a href="#" class="btn btn-primary btn-sm pull-right">添加期</a>
+		              <a href="#add-qi" data-toggle="modal" data-target="#add-qi" class="btn btn-primary btn-sm pull-right">添加期</a>
                 </div>
     					</div>
     				</div>
     				<div class="content-wrap">
     					<div class="c-body">
+                <!--期汇总图表-->
+                <div id="chartContainer4" style="height: 300px; width: 100%;" class="mb-4">
+                </div>
                 <table class="table table-bordered">
-                  <legend>第15期</legend>
-                  <thead>
-                    <tr><th>计量编号</th><th class="text-right">计量金额</th><th class="text-center">计量月份</th></tr>
-                  </thead>
-                  <tbody>
-                    <tr><td><a href="jiliang-detail.html">WWUJ-2-201710A</a></td><td class="text-right">34234234.00</td><td class="text-center">201710</td></tr>
-                  </tbody>
-                  <tfoot>
-                    <tr><td>合计</td><td class="text-right"><b>34234234.00</b></td><td></td></tr>
-                  </tfoot>
-                </table>
-                <table class="table table-bordered">
-                  <legend>第14期</legend>
                   <thead>
-                    <tr><th>计量编号</th><th class="text-right">计量金额</th><th class="text-center">计量月份</th></tr>
+                    <tr>
+                      <th>期数</th>
+                      <th class="text-center">计量月份</th>
+                      <th class="text-center">本期合同计量</th>
+                      <th class="text-center">本期数量变更计量</th>
+                      <th class="text-center">截止上期累计完成</th>
+                      <th class="text-center">本期完成计量</th>
+                      <th class="text-center">累计完成计量</th>
+                      <th class="text-center">状态</th>
+                    </tr>
                   </thead>
                   <tbody>
-                    <tr><td><a href="jiliang-detail.html">WWUJ-2-201709B</a></td><td class="text-right">27001464.00</td><td class="text-center">201709</td></tr>
-                    <tr><td><a href="jiliang-detail.html">WWUJ-2-201709A</a></td><td class="text-right">19962001.00</td><td class="text-center">201709</td></tr>
-                    <tr><td>合计</td><td class="text-right"><b>46963465.00</b></td><td></td></tr>
+                    <tr>
+                      <td><a href="jiliang-qi-detail.html">第 4 期</a></td>
+                      <td class="text-center">201710</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-cenetr">待上报</td>
+                    </tr>
+                      <tr>
+                        <td><a href="jiliang-qi-detail.html">第 3 期</a></td>
+                        <td class="text-center">201710</td>
+                        <td class="text-right">34234234.00</td>
+                        <td class="text-right">34234234.00</td>
+                        <td class="text-right">34234234.00</td>
+                        <td class="text-right">34234234.00</td>
+                        <td class="text-right">34234234.00</td>
+                        <td class="text-cenetr"><a href="" class="btn btn-primary btn-sm">审批</a></td>
+                      </tr>
+                    <tr>
+                      <td><a href="jiliang-qi-detail.html">第 2 期</a></td>
+                      <td class="text-center">201710</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-cenetr text-warning">审批中</td>
+                    </tr>
+                    <tr>
+                      <td><a href="jiliang-qi-detail.html">第 1 期</a></td>
+                      <td class="text-center">201710</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-right">34234234.00</td>
+                      <td class="text-cenetr text-success">审批完成</td>
+                    </tr>
                   </tbody>
                 </table>
     					</div>
     				</div>
     			</div>
-    		</div>	</div>
+    		</div>
+      </div>
+      <!--弹出添加标段-->
+      <div class="modal fade" id="add-qi" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">添加新一期</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="form-group">
+                      <label>期</label>
+                      <input class="form-control" value="第 4 期" type="text">
+                    </div>
+                    <div class="form-group">
+                      <label>计量月份</label>
+                      <input class="form-control" type="month">
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary">确定添加</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'],
+    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 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                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: ['45%', 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>
 
 </html>

jiliang.html

@@ -135,7 +135,7 @@
                 </div>
                 <div>
 		              <a href="#add-mj" data-toggle="modal" data-target="#add-mj" class="btn btn-primary btn-sm pull-right">添加中间计量</a>
-                  <a class="btn btn-outline-secondary btn-sm pull-right disabled">已审批</a>
+                  <a href="#sp-list" data-toggle="modal" data-target="#sp-list" class="btn btn-outline-secondary btn-sm pull-right">已审批</a>
                   <a href="#add-mj" data-toggle="modal" data-target="#add-mj" class="btn btn-outline-primary btn-sm pull-right"><i class="fa fa-cog"></i></a>
                 </div>
               </div>
@@ -271,6 +271,38 @@
               </div>
           </div>
       </div>
+      <!--审批流程/结果-->
+      <div class="modal fade" id="sp-list" data-backdrop="static">
+          <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                  <div class="modal-header">
+                      <h5 class="modal-title">审批流程</h5>
+                  </div>
+                  <div class="modal-body">
+                    <div class="card mt-3">
+                      <ul class="list-group list-group-flush">
+                        <li class="list-group-item">
+                          <span class="text-success pull-right">审批通过</span>
+                           <h5 class="card-title">1 张三 <small class="text-muted">监理</small></h5>
+                           <p class="card-text">审批意见。2018-01-01</p>
+                        </li>
+                        <li class="list-group-item">
+                          <span class="text-warning pull-right">审批中</span>
+                           <h5 class="card-title">2 王五 <small class="text-muted">监理</small></h5>
+                           <p class="card-text"></p>
+                        </li>
+                        <li class="list-group-item">
+                           <h5 class="card-title">3 李四 <small class="text-muted">监理</small></h5>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</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>

taizhang-bg-detail.html

@@ -134,17 +134,8 @@
     					</div>
     				</div>
     				<div class="content-wrap row">
-    					<div class="c-header p-0 col-12 d-flex flex-row-reverse">
+    					<div class="c-header p-0 col-12">
 
-                <!--标准清单-->
-                <ul class="nav nav-tabs">
-                  <li class="nav-item">
-                    <a class="nav-link active" data-toggle="tab" href="#xiangmujie" role="tab">项目节</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" data-toggle="tab" href="#qingdan" role="tab">工程量清单</a>
-                  </li>
-                </ul>
     					</div>
     					<div class="c-body col-8">
                 <div class="sjs-height-1">
@@ -153,7 +144,7 @@
       						</table>
                 </div>
     					</div>
-              <div class="c-body col-4">
+              <div class="c-body col">
                 <div class="tab-content">
                   <div id="xiangmujie" class="tab-pane active">
                     <select class="form-control form-control-sm"><option>0号计量台帐部位参考(项目节)</option></select>
@@ -173,6 +164,17 @@
                   </div>
                 </div>
               </div>
+              <div class="col-auto pl-0">
+                <!--右侧菜单-->
+                <ul class="nav flex-column right-nav">
+                  <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" href="#xiangmujie" role="tab">项目节</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" data-toggle="tab" href="#qingdan" role="tab">工程量清单</a>
+                  </li>
+                </ul>
+              </div>
     				</div>
     			</div>
     		</div>

taizhang.html

@@ -142,18 +142,7 @@
     					</div>
     				</div>
     				<div class="content-wrap row">
-    					<div class="c-header p-0 col-12 d-flex flex-row-reverse">
-
-                <!--标准清单-->
-                <ul class="nav nav-tabs">
-                  <li class="nav-item">
-                    <a class="nav-link active" data-toggle="tab" href="#xiangmujie" role="tab">项目节</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" data-toggle="tab" href="#qingdan" role="tab">工程量清单</a>
-                  </li>
-                </ul>
-    					</div>
+    					<div class="c-header p-0 col-12"></div>
     					<div class="c-body col-8">
                 <div class="sjs-height-1">
       						<table class="table table-bordered">
@@ -181,7 +170,7 @@
                   </table>
                 </div>
     					</div>
-              <div class="c-body col-4">
+              <div class="c-body col">
                 <div class="tab-content">
                   <div id="xiangmujie" class="tab-pane active">
                     <select class="form-control form-control-sm"><option>0号计量台帐部位参考(项目节)</option></select>
@@ -201,6 +190,17 @@
                   </div>
                 </div>
               </div>
+              <div class=" col-auto pl-0">
+                <!--右侧菜单-->
+                <ul class="nav flex-column right-nav">
+                  <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" href="#xiangmujie" role="tab">项目节</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" data-toggle="tab" href="#qingdan" role="tab">工程量清单</a>
+                  </li>
+                </ul>
+              </div>
     				</div>
     			</div>
     		</div>