更新台帐管理 计量管理 标段管理 ；侧栏菜单

account-info.html

@@ -56,14 +56,31 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-          <li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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-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">

biangeng.html

@@ -27,6 +27,19 @@
        </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">
@@ -55,36 +68,35 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item active"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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-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-sidebar">
-    				<div class="panel-title">
-    					<div class="title-bar">
-    						<h2>标段列表</h2>
-    					</div>
-    				</div>
-    				<div class="scrollbar-auto">
-    					<div class="nav-box">
-    						<ul class="nav-list list-unstyled">
-    							<li><a href="#"><span>WWUJ-1</span></a></li>
-    							<li class="active"><a href="#"><span>WWUJ-2</span></a></li>
-    							<li><a href="#"><span>WWUJ-3</span></a></li>
-    							<li><a href="#"><span>WWUJ-4</span></a></li>
-    						</ul>
-    					</div>
-    				</div>
-    			</div>
     			<div class="panel-content">
-    				<div class="panel-title">
+    				<div class="panel-title fluid">
     					<div class="title-main">
     						<h2>
                     WWUJ-2 变更

biaoduan-detail.html

@@ -0,0 +1,406 @@
+<!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-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

@@ -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>
@@ -27,6 +28,9 @@
        </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">
@@ -55,44 +59,60 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item active"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
+				<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-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"><h2>标段管理<a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-sm btn-primary pull-right">新建标段</a></h2></div>
-				</div>
-				<div class="content-wrap">
-					<div class="c-header">
+					<div class="title-main  d-flex justify-content-between">
             <div>
-              <div class="form-check-inline">
-                <label class="form-check-label">
-                  <input class="form-check-input" type="checkbox">
-                  查看计量概况
-                </label>
+              <div class="btn-group">
+                <div class="form-check-inline">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox">
+                    查看计量进度
+                  </label>
+                </div>
               </div>
-              <div class="form-check-inline">
-                <select class="form-control form-control-sm">
-                  <option>标段类型筛选</option>
-                  <option>土建标</option>
-                </select>
+              <div class="btn-group">
+                  <select class="form-control form-control-sm m-0">
+                    <option>标段类型筛选</option>
+                    <option>土建标</option>
+                  </select>
               </div>
             </div>
-					</div>
+            <div>
+              <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-sm btn-primary pull-right">新建标段</a>
+            </div>
+          </div>
+				</div>
+				<div class="content-wrap">
 					<div class="c-body">
-            <table class="table table-bordered table-sm">
-              <thead><th>名称</th><th>标段类型</th><th>计量期数</th><th>创建时间</th><th width="150">管理</th></thead>
-              <tr><td><a href="jiliang.html">WWUJ-2</a></td><td>土建标</td><td>15</td><td>2017-12-1</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>
-            </table>
-            <!--包含计量概况-->
+            <!--默认-->
             <table class="table table-bordered table-sm">
               <thead>
                 <th>名称</th>
@@ -108,7 +128,33 @@
                 <th>本期应付</th>
               </thead>
               <tr>
-                <td><a href="jiliang.html">WWUJ-2</a></td>
+                <td><a href="biaoduan-detail.html">WWUJ-1</a></td>
+                <td>土建标</td>
+                <td>15</td>
+                <td>审批中</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td><a href="biaoduan-detail.html">WWUJ-2</a></td>
+                <td>土建标</td>
+                <td>15</td>
+                <td>审批中</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td><a href="biaoduan-detail.html">WWUJ-3</a></td>
                 <td>土建标</td>
                 <td>15</td>
                 <td>审批中</td>
@@ -121,7 +167,67 @@
                 <td>0</td>
               </tr>
             </table>
-					</div>
+            <!--查看计量进度-->
+            <table class="table table-bordered table-sm">
+                <thead>
+                  <th>名称</th>
+                  <th width="120">标段类型</th>
+                  <th width="120">完成期数</th>
+                  <th>累计合同计量</th>
+                  <th>截止本期累计完成/本期完成/未完成</th>
+                </thead>
+                <tr>
+                  <td><a href="biaoduan-detail.html">WWUJ-1</a></td>
+                  <td>土建标</td>
+                  <td>15</td>
+                  <td>￥5,000,000.00</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>
+                <tr>
+                  <td><a href="biaoduan-detail.html">WWUJ-2</a></td>
+                  <td>土建标</td>
+                  <td>15</td>
+                  <td>￥5,000,000.00</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>
+                <tr>
+                  <td><a href="biaoduan-detail.html">WWUJ-3</a></td>
+                  <td>土建标</td>
+                  <td>15</td>
+                  <td>￥5,000,000.00</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>
+            <!--按标段类型筛选后，增加显示图表-->
+            <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>
+          </div>
 				</div>
 			</div>
 		</div>
@@ -154,23 +260,6 @@
           </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>
@@ -178,4 +267,115 @@
     <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: 'item',
+                      formatter: "{a} <br/>{b}：{c} 元<br>占：{d} %"
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '60%',
+                          center: ['50%','50%'],
+                          data:[
+                              {value:7814964.00, name:'WWUJ-1'},
+                              {value:6043186.10, name:'WWUJ-2'},
+                              {value:6917475.00, name:'WWUJ-3'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据
+                myChart.setOption(option);
+                //1 //
+                //2 土建标月进度//
+                var myChart = echarts.init(document.getElementById('chartContainer2'));
+                var option = {
+                          color:['#6699FF','#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>

css/main.css

@@ -71,14 +71,14 @@ body {
 .main-nav {
   position: fixed;
   z-index: 99;
-  width:55px;
+  width:120px;
   left: 0;
   top: 0;
   height: 100%;
   background: #33425b;
 }
 .main-panel{
-  padding-left:55px;
+  padding-left:120px;
   box-sizing: border-box;
 }
 .panel-sidebar{
@@ -87,7 +87,7 @@ body {
   position: fixed;
   height: 100%;
   z-index: 4;
-  left:55px;
+  left:120px;
   padding-top: 100px;
   border-right: 1px solid #ddd;
   width: 250px;
@@ -127,11 +127,11 @@ body {
 }
 .panel-content .panel-title{
   left: 0;
-  padding-left: 305px;
+  padding-left: 370px;
   padding-right: 20px;
 }
 .panel-content .panel-title.fluid{
-  padding-left:55px
+  padding-left:120px
 }
 .panel-title>.title-bar{
   padding-left: 20px
@@ -146,12 +146,12 @@ body {
 .panel-title>.title-bar>h2 .btn{
   margin-right:15px
 }
-.panel-title>.title-main .btn {
-  margin:0 0 0 20px
-}
 .panel-title>.title-main .btn.pull-right {
   margin:10px 0 0 10px
 }
+.panel-title>.title-main .form-control {
+  margin:10px 0 0 0
+}
 .panel-title>.title-main{
   padding-left: 15px
 }
@@ -182,7 +182,7 @@ body {
   margin:0
 }
 .header .logo>a{
-  width:55px;
+  width:120px;
   height:50px;
   line-height: 50px;
   display: inline-block;
@@ -262,23 +262,47 @@ body {
 }
 .bg-nav a{
   color:#7786ab;
-  font-size: 24px;
-  width:55px;
+  width:120px;
   height: 55px;
   line-height: 55px;
   display: inline-block;
+  padding:0 0 0 10px
+}
+.bg-nav > li{
+  width:120px
 }
-.bg-nav > li.active > a{
+.bg-nav > li.active{
+  background: #192948
+}
+.bg-nav > li.active a{
   border-radius: 0;
   background: #192948
 }
 .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
   background: #192948;
-  color:#f2f2f2
+  color:#f2f2f2;
+  text-decoration: none;
 }
 .bg-nav > li + li {
     margin-top:0;
 }
+.bg-nav .sub-menu {
+  list-style:none;
+  padding:0 0 0 20px;
+  width:120px;
+  display: none
+}
+.bg-nav .sub-menu a {
+  width:100px;
+  height:30px;
+  line-height:30px
+}
+.bg-nav .sub-menu:last-child{
+  margin:0 0 20px 0
+}
+.bg-nav .menu-arrow{
+  margin:22px 8px 0 0
+}
 .nav-box h3{
   font-size: 14px;
   font-weight: 700;
@@ -325,3 +349,7 @@ body {
   font-size:18px;
   color:#f90000
 }
+
+.bg-gray {
+ background-color:#bbb!important;
+}

dashboard.html

@@ -55,20 +55,37 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item active"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <ul class="nav nav-pills flex-column bg-nav">
+          <li class="nav-item active"><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-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"><h2>主页</h2></div>
+					<div class="title-main"><h2>代办事项</h2></div>
 				</div>
 				<div class="content-wrap">
 					<div class="c-header mt-3">

hetong.html

@@ -27,6 +27,19 @@
        </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">
@@ -56,36 +69,35 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item active"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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="">台帐变更</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="">计量台帐</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="">期计量</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 active"><a href="hetong.html"title="合同管理"><i class="fa fa-handshake-o"></i> 合同管理</a></li>
+        </ul>
 			</div>
 		</div>
     <div class="main-panel">
-    			<div class="panel-sidebar">
-    				<div class="panel-title">
-    					<div class="title-bar">
-    						<h2>标段列表</h2>
-    					</div>
-    				</div>
-    				<div class="scrollbar-auto">
-    					<div class="nav-box">
-    						<ul class="nav-list list-unstyled">
-    							<li><a href="#"><span>WWUJ-1</span></a></li>
-    							<li class="active"><a href="#"><span>WWUJ-2</span></a></li>
-    							<li><a href="#"><span>WWUJ-3</span></a></li>
-    							<li><a href="#"><span>WWUJ-4</span></a></li>
-    						</ul>
-    					</div>
-    				</div>
-    			</div>
     			<div class="panel-content">
-    				<div class="panel-title">
+    				<div class="panel-title fluid">
     					<div class="title-main">
     						<h2>
                     WWUJ-2 合同

jiliang-detail.html

@@ -27,6 +27,19 @@
        </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">
@@ -56,13 +69,29 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item active"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
+				<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="">台帐变更</a></li>
+            </ul>
+            <ul class="sub-menu">
+              <li><a href="">计量台帐</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="">期计量</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>
@@ -70,18 +99,17 @@
     			<div class="panel-sidebar">
     				<div class="panel-title">
     					<div class="title-bar">
-    						<h2>LGBH-201710-001</h2>
+    						<h2>WWUJ-2-201710</h2>
     					</div>
     				</div>
     				<div class="scrollbar-auto">
     					<div class="nav-box">
     						<ul class="nav-list list-unstyled">
-    							<li class="active"><a href="qingdan-detail.html"><span>计量信息</span></a></li>
-    							<li><a href="#"><span>中期计量汇总</span></a></li>
-    							<li><a href="#"><span>中期计量清单</span></a></li>
+    							<li><a href="qingdan-detail.html"><span>中间计量清单</span></a></li>
     							<li><a href="#"><span>中间计量单</span></a></li>
     							<li><a href="#"><span>计量进度</span></a></li>
     							<li><a href="#"><span>计量报表</span></a></li>
+    							<li class="active"><a href="qingdan-detail.html"><span>计量信息</span></a></li>
     						</ul>
     					</div>
     				</div>

jiliang-qi.html

@@ -0,0 +1,151 @@
+<!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-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-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>
+                  <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>
+                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <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>
+                  </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>
+                  </tbody>
+                </table>
+    					</div>
+    				</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>

jiliang.html

@@ -27,6 +27,19 @@
        </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">
@@ -56,91 +69,60 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item active"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
+				<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-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-sidebar">
-    				<div class="panel-title">
-    					<div class="title-bar">
-    						<h2>标段列表</h2>
-    					</div>
-    				</div>
-    				<div class="scrollbar-auto">
-    					<div class="nav-box">
-    						<ul class="nav-list list-unstyled">
-    							<li><a href="#"><span>WWUJ-1</span></a></li>
-    							<li class="active"><a href="#"><span>WWUJ-2</span></a></li>
-    							<li><a href="#"><span>WWUJ-3</span></a></li>
-    							<li><a href="#"><span>WWUJ-4</span></a></li>
-    						</ul>
-    					</div>
-    				</div>
-    			</div>
     			<div class="panel-content">
-    				<div class="panel-title">
-    					<div class="title-main">
-    						<h2>
-                    WWUJ-2 计量
-						        <a href="#" class="btn btn-primary btn-sm pull-right">添加计量</a>
-                </h2>
+    				<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>
+                </div>
     					</div>
     				</div>
     				<div class="content-wrap">
-              <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="#zhongjian" role="tab">中间计量</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="nav-link" data-toggle="tab" href="#qishu" role="tab">期数汇总</a>
-                  </li>
-                </ul>
-    					</div>
     					<div class="c-body">
                 <div class="tab-content">
-                  <div id="zhongjian" class="tab-pane active">
-                    <table class="table table-bordered">
-                      <thead>
-                        <tr><th>计量编号</th><th>计量金额</th><th>计量月份</th><th>计量期数</th><th>状态</th><th>当前处理人</th></tr>
-                      </thead>
-                      <tbody>
-                        <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>15</td><td>审批中</td><td>监理-张三</td></tr>
-                      </tobody>
-                    </table>
-                  </div>
-                  <div id="qishu" class="tab-pane">
-                    <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>
-                      </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>
-                      </tbody>
-                    </table>
-                  </div>
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr><th>计量编号</th><th>计量金额</th><th>计量月份</th><th>计量期数</th><th>状态</th><th>当前处理人</th></tr>
+                    </thead>
+                    <tbody>
+                      <tr><td><a href="jiliang-detail.html">WWUJ-2-201710</a></td><td>34234234.00</td><td>201710</td><td>15</td><td>审批中</td><td>监理-张三</td></tr>
+                    </tobody>
+                  </table>
                 </div>
     					</div>
     				</div>

js/global.js

@@ -44,4 +44,22 @@ $("body").click(function(event){
 $(function () {
   $('[data-toggle="tooltip"]').tooltip()
 });
+/*侧栏菜单*/
+$(".bg-nav > li > a").click(function() {
+      var self = $(this);
+      var subMenu = $(this).siblings('ul.sub-menu');
+      if(subMenu.length > 0) {
+          if(subMenu.is(":visible")) {
+              self.find('.menu-arrow').removeClass('fa-angle-up').addClass('fa-angle-down');
+              subMenu.slideUp('fast');
+              self.parent().removeClass('active');
+          }else{
+              self.parent().addClass('active');
+              self.find('.menu-arrow').removeClass('fa-angle-down').addClass('fa-angle-up');
+              subMenu.slideDown('fast');
+          }
+      }
+  });
+
+
 });

settings-poj.html

@@ -56,14 +56,31 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-          <li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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-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">

settings-user.html

@@ -56,14 +56,31 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-          <li class="nav-item"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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-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">

taizhang-bg.html

@@ -0,0 +1,198 @@
+<!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="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="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 active"><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-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">
+                    <input type="month" class="form-control form-control-sm mt-0">
+                  </div>
+                  <div class="btn-group">
+                    <select class="form-control form-control-sm mt-0">
+                      <option>全部</option>
+                      <option>草稿</option>
+                      <option>审批中</option>
+                      <option>退回</option>
+                      <option>完成</option>
+                      <option>作废</option>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <a href="#" class="btn btn-primary btn-sm">新建变更</a>
+                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <table class="table table-bordered">
+                  <thead>
+                    <tr>
+                      <th>编号</th>
+                      <th>变更名称</th>
+                      <th>创建时间</th>
+                      <th>提交人</th>
+                      <th>状态</th>
+                      <th>处理时间</th>
+                      <th>操作</th>
+                    </tr>
+                  </thead>
+                  <tr>
+                    <td>0001</td>
+                    <td><a href="taizhang-bg-detail.html">编写错漏1</a></td>
+                    <td>2017-11-23</td>
+                    <td>张三</td>
+                    <td>完成</td>
+                    <td>2017-11-25</td>
+                    <td></td>
+                  </tr>
+                  <tr>
+                    <td>0002</td>
+                    <td><a href="taizhang-bg-detail.html">编写错漏2</a></td>
+                    <td>2017-11-23</td>
+                    <td>张三</td>
+                    <td>王五 审批中</td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                  <tr>
+                    <td>0003</td>
+                    <td><a href="taizhang-bg-detail.html">编写错漏3</a></td>
+                    <td>2017-11-23</td>
+                    <td>张三</td>
+                    <td>退回</td>
+                    <td>2017-12-06</td>
+                    <td><a href="#" class="btn btn-primary btn-sm">重新上报</a> <a href="#" class="btn btn-secondary btn-sm">作废</a></td>
+                  </tr>
+                  <tr>
+                    <td>0004</td>
+                    <td><a href="taizhang-bg-detail.html">编写错漏4</a></td>
+                    <td>2017-11-23</td>
+                    <td>张三</td>
+                    <td>草稿</td>
+                    <td></td>
+                    <td><a href="#" class="btn btn-primary btn-sm">发起审批</a> <a href="#" class="btn btn-primary btn-sm">完成变更</a></td>
+                  </tr>
+                  <tr>
+                    <td>0004</td>
+                    <td><a href="taizhang-bg-detail.html">编写错漏4</a></td>
+                    <td>2017-11-23</td>
+                    <td>张三</td>
+                    <td>张三 作废</td>
+                    <td>2017-11-24</td>
+                    <td></td>
+                  </tr>
+                </table>
+    					</div>
+    				</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>

taizhang-jl.html

@@ -0,0 +1,216 @@
+<!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="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="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 active"><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-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">
+                    <select class="form-control form-control-sm mt-0">
+                        <option>第 15 期</option>
+                        <option>第 14 期</option>
+                        <option>第 13 期</option>
+                        <option>第 12 期</option>
+                        <option>第 11 期</option>
+                      </select>
+                    </div>
+                    <div class="btn-group">
+                      <select class="form-control form-control-sm mt-0">
+                        <option>终审 王五</option>
+                        <option>2审 赵四</option>
+                        <option>1审 张三</option>
+                      </select>
+                    </div>
+                    <div class="btn-group">
+                      <div class="form-check-inline">
+                        <label class="form-check-label">
+                          <input class="form-check-input" type="checkbox">
+                          审批结果比较
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                <div>
+                </div>
+    					</div>
+    				</div>
+    				<div class="content-wrap">
+    					<div class="c-body">
+                <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>
+                <!--审批结果比较-->
+                <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">上报</th>
+                        <th colspan="2">1审 张三</th>
+                        <th colspan="2">2审 赵四</th>
+                        <th colspan="2">终审 王五</th>
+                      </tr>
+                      <tr>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                        <th>数量</th>
+                        <th>金额</th>
+                      </tr>
+                    </thead>
+                  </table>
+    					</div>
+    				</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>

taizhang-shenpi.html

@@ -23,7 +23,21 @@
          <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>
+     <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>
@@ -54,39 +68,37 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-          <li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item active"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
-				</ul>
+        <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 active"><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-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-sidebar">
-    				<div class="panel-title">
-    					<div class="title-bar d-flex justify-content-between">
-    						<h2>标段列表</h2>
-                <div class="mr-3"></div>
-    					</div>
-    				</div>
-    				<div class="scrollbar-auto">
-    					<div class="nav-box">
-    						<ul class="nav-list list-unstyled">
-    							<li><a href="#"><span>WWUJ-1</span></a></li>
-    							<li class="active"><a href="#"><span>WWUJ-2</span><span class="badge badge-primary">待审</span></a></li>
-    							<li><a href="#"><span>WWUJ-3</span></a></li>
-    							<li><a href="#"><span>WWUJ-4</span></a></li>
-    						</ul>
-    					</div>
-    				</div>
-    			</div>
     			<div class="panel-content">
-    				<div class="panel-title">
+    				<div class="panel-title fluid">
     					<div class="title-main">
-    						<h2>WWUJ-2 台帐
+    						<h2>WWUJ-2 台帐审批
     						<a href="#" class="btn btn-success btn-sm pull-right">审批通过</a>
     						<a href="#" class="btn btn-outline-warning btn-sm pull-right">退回</a>
     					</div>

taizhang.html

@@ -23,7 +23,24 @@
          <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>
+     <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="poj-name">
+      <span class="name">台帐分解</span>
     </div>
 		<div class="header-box">
 			<div class="header-nav"></div>
@@ -54,46 +71,37 @@
 	<div class="main">
 		<div class="main-nav">
 			<div class="nav-top">
-				<ul class="nav nav-pills flex-column nav-fill bg-nav">
-					<li class="nav-item"><a href="dashboard.html" data-toggle="tooltip" data-placement="right" title="主页"><i class="fa fa-dashboard"></i></a></li>
-					<li class="nav-item"><a href="biaoduan.html" data-toggle="tooltip" data-placement="right" title="标段管理"><i class="fa fa-list-ul"></i></a></li>
-					<li class="nav-item active"><a href="taizhang.html" data-toggle="tooltip" data-placement="right" title="台帐管理"><i class="fa fa-list-alt"></i></a></li>
-					<li class="nav-item"><a href="jiliang.html" data-toggle="tooltip" data-placement="right" title="计量管理"><i class="fa fa-calendar-check-o"></i></a></li>
-					<li class="nav-item"><a href="biangeng.html" data-toggle="tooltip" data-placement="right" title="变更管理"><i class="fa fa-retweet"></i></a></li>
-					<li class="nav-item"><a href="hetong.html" data-toggle="tooltip" data-placement="right" title="合同管理"><i class="fa fa-handshake-o"></i></a></li>
+				<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 active"><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-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-sidebar">
-    				<div class="panel-title">
-    					<div class="title-bar d-flex justify-content-between">
-    						<h2>标段列表</h2>
-    					</div>
-    				</div>
-    				<div class="scrollbar-auto">
-    					<div class="nav-box">
-    						<ul class="nav-list list-unstyled">
-    							<li><a href="#"><span>WWUJ-1</span></a></li>
-    							<li class="active"><a href="#"><span>WWUJ-2</span><span class="badge badge-primary">待审</span></a></li>
-    							<li><a href="#"><span>WWUJ-3</span></a></li>
-    							<li><a href="#"><span>WWUJ-4</span></a></li>
-    						</ul>
-    					</div>
-    				</div>
-    			</div>
     			<div class="panel-content">
-    				<div class="panel-title">
-    					<div class="title-main">
-    						<h2>WWUJ-2 台帐
-    						<a href="#" class="btn btn-primary btn-sm pull-right">上报审批</a>
-    						<a href="#" class="btn btn-outline-secondary btn-sm pull-right disabled">报审完成</a>
-                </h2>
-    					</div>
-    				</div>
-    				<div class="content-wrap row">
-    					<div class="c-header p-0 col-12 d-flex justify-content-between">
-                <!--工具-->
+    				<div class="panel-title fluid">
+    					<div class="title-main  d-flex justify-content-between"><!--工具-->
                 <div>
                   <div class="btn-group">
                     <a href="" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="复制"><i class="fa fa-files-o" aria-hidden="true"></i></a>
@@ -115,11 +123,26 @@
                     <div class="form-check-inline">
                       <label class="form-check-label">
                         <input type="checkbox" class="form-check-input">
-                        标示变更
+                        台帐变更
+                      </label>
+                    </div>
+                    <div class="form-check-inline">
+                      <label class="form-check-label">
+                        <input type="checkbox" class="form-check-input">
+                        变更令
                       </label>
                     </div>
+                  </div>
                 </div>
+                <div>
+					        <a href="#" class="btn btn-primary btn-sm pull-right">上报审批</a>
+						      <a href="#" class="btn btn-outline-secondary btn-sm pull-right disabled">报审完成</a>
                 </div>
+    					</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">