s-project-section.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <!DOCTYPE html>
  2. <html lang=zh-cn>
  3. <head>
  4. <meta charset=utf-8>
  5. <title>纵横计量支付系统</title>
  6. <meta name=description content=计量支付>
  7. <meta name=copyright content=smartcost.com.cn>
  8. <link rel=stylesheet href=css/bootstrap.css>
  9. <link rel=stylesheet href=css/style.css>
  10. <script src=js/jquery-1.9.1.min.js></script>
  11. <script src=js/bootstrap.js></script>
  12. <script src=js/jl.js></script>
  13. <script src=js/echarts.min.js></script>
  14. </head>
  15. <body><div class="wrapHeader"><h1 title="纵横计量支付" class="mainLogo"></h1><div class="userInfo"><img src="images/avtra.png" class="fR">
  16. <div class="btn-group">
  17. <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">张三&nbsp;<span class="caret"></span></button>
  18. <ul class="dropdown-menu">
  19. <li><a href="#">个人信息</a></li>
  20. <li><a href="#"><span data-icon="r" aria-hidden="true"></span>&nbsp;工作组</a></li>
  21. <li><a href="#"><span data-icon="B" aria-hidden="true"></span>&nbsp;我的任务</a></li>
  22. <li class="divider"></li>
  23. <li><a href="#">帮助中心</a></li>
  24. <li><a href="#">退出</a></li>
  25. </ul>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="wrapContent">
  30. <div class="mainSidebar">
  31. <div class="mainNav">
  32. <ul>
  33. <li><a href="w-project.html" title="项目管理"><div data-icon="A" aria-hidden="true" class="navIcon"></div>项目管理</a></li>
  34. <li><a href="r-project.html" title="需审批项目"><div data-icon="C" aria-hidden="true" class="navIcon"></div>审批项目</a><span class="badge badge-warning">4</span></li>
  35. <li><a href="s-project.html" title="我编制的项目" class="focus" ><div data-icon="B" aria-hidden="true" class="navIcon"></div>编制项目</a></li>
  36. <li><a href="" title="生成报表"><div data-icon="D" aria-hidden="true" class="navIcon"></div>报表</a></li>
  37. <li><a href="" title="数据汇总"><div data-icon="E" aria-hidden="true" class="navIcon"></div>汇总</a></li>
  38. </ul>
  39. </div>
  40. </div>
  41. <div class="mainContainer">
  42. <!--内容-->
  43. <div class="mainContent">
  44. <div class="title clearfix">
  45. <ul class="nav nav-pills">
  46. <li class="dropdown"><a title="返回" href="s-project.html"><span class="closePanel" aria-hidden="true" data-icon="Z"></span></a></li>
  47. <li class="dropdown">
  48. <a href="#" data-toggle="dropdown" class="dropdown-toggle">
  49. 黄金大桥项目<b class="caret"></b>
  50. </a>
  51. <ul class="dropdown-menu">
  52. <li><a href="#">重庆XX至XX公路</a></li>
  53. <li><a href="#">重庆XX至XX公路</a></li>
  54. <li><a href="#">重庆XX至XX公路</a></li>
  55. <li><a href="#">重庆XX至XX公路</a></li>
  56. </ul>
  57. </li>
  58. </ul>
  59. </div>
  60. <div class="project">
  61. <div class="proSection clearfix">
  62. <!--图表5-->
  63. <div class="fL" style="width:30%">
  64. <div id="chartContainer6" style="height: 300px; width: 100%;">
  65. </div>
  66. </div>
  67. <!--图表5-->
  68. <div class="fL" style="width:70%;height:300px;overflow:hide">
  69. <div id="chartContainer7" style="height: 300px; width: 100%;">
  70. </div>
  71. </div>
  72. </div>
  73. <div class="proSection clearfix">
  74. <!--表-->
  75. <table class="table table-striped">
  76. <thead>
  77. <tr>
  78. <th width="15%">标段名</th><th width="16%" class="taC">总价/期数</th><th width="40%" class="taC">截止上期累计完成/本期完成/未完成</th>
  79. </tr>
  80. <tr>
  81. <td width="15%">
  82. <a href="s-project-section-detail.html">GZ-HJDQ-JL-001(点我)</a>
  83. <br>土建合同<br>
  84. <a data-target="#del-confirm-1" data-toggle="modal" class="colRed"><span aria-hidden="true" data-icon="U"></span>删除</a>
  85. </td>
  86. <td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colOrange">审批中</span>)</td><td width="40%" class="taR"><div class="progress">
  87. <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 45%;" class="progress-bar progress-bar-success">45%</div>
  88. <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:25%;" class="progress-bar">25%</div>
  89. <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:30%;" class="progress-bar progress-bar-gary">30%</div>
  90. </div></td>
  91. </tr>
  92. <tr>
  93. <td width="15%"><a href="#">GZ-HJDQ-JL-002</a><br>土建合同<br><a class="colRed"><span aria-hidden="true" data-icon="U"></span>删除</a></td><td width="16%" class="taR">¥<b>5,000,000.00</b><br>共 2 期(本期 <span class="colGreen">已完成</span>)</td><td width="40%" class="taR"><div class="progress">
  94. <div data-original-title="截止本期累计完成:¥731,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width: 29%;" class="progress-bar progress-bar-success">29%</div>
  95. <div data-original-title="本期完成:¥31,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:5%;" class="progress-bar">5%</div>
  96. <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:66%;" class="progress-bar progress-bar-gary">66%</div>
  97. </div></td>
  98. </tr>
  99. </tr>
  100. <tr>
  101. <td width="15%"><a href="#">GZ-HJDQ-JL-003</a><br>监理合同<br><a class="colRed" data-target="#del-confirm-2" data-toggle="modal"><span aria-hidden="true" data-icon="U"></span>删除</a></td><td width="16%" class="taR">¥<b>0.00</b><br>共 0 期(本期 <span class="colOrange">审批中</span>)</td>
  102. <td width="40%" class="taR"><div class="progress">
  103. <div data-original-title="未完成:¥71,121,121.00" data-toggle="tooltip" data-placement="bottom" style="width:0%;" class="progress-bar progress-bar-gary">0%</div>
  104. </td>
  105. </tr>
  106. </table>
  107. </div>
  108. <!--表-->
  109. </div>
  110. </div>
  111. </div>
  112. <!--内容-->
  113. </div>
  114. </div>
  115. <script type="text/javascript">autoFlashHeight();</script>
  116. <script type="text/javascript">
  117. //5 期数组成//
  118. // 基于准备好的dom,初始化echarts图表
  119. var myChart = echarts.init(document.getElementById('chartContainer6'));
  120. var option = {
  121. color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
  122. '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
  123. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  124. '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
  125. title : {
  126. text: '',
  127. x:'left'
  128. },
  129. tooltip : {
  130. trigger: 'item',
  131. formatter: "{a} <br/>{b}:<br>{c} 元<br>占标段:{d} %"
  132. },
  133. calculable : true,
  134. series : [
  135. {
  136. name:'标段计量分布',
  137. type:'pie',
  138. roseType: 'angle',
  139. radius : '40%',
  140. center: ['50%', 155],
  141. data:[
  142. {value:27814964.00, name:'GZ-HJDQ-JL-001'},
  143. {value:41043186.10, name:'GZ-HJDQ-JL-002'},
  144. {value:42917475.00, name:'GZ-HJDQ-JL-003'}
  145. ]
  146. }
  147. ]
  148. };
  149. // 为echarts对象加载数据
  150. myChart.setOption(option);
  151. //5 期数组成//
  152. //6 标段计量分布//
  153. var myChart = echarts.init(document.getElementById('chartContainer7'));
  154. var option = {
  155. color:['#ff6666','#3cb371'],
  156. title : {
  157. text: '项目按月进度'
  158. },
  159. tooltip : {
  160. trigger: 'axis',
  161. formatter: "{b} <br/>{a}:{c} %<br/>{a1}:{c1} %"
  162. },
  163. legend: {
  164. data:['累计完成','本月完成']
  165. },
  166. dataZoom : {
  167. show : true,
  168. start :50,
  169. end : 100
  170. },
  171. xAxis : [
  172. {
  173. type : 'category',
  174. boundaryGap : true,
  175. data : [
  176. '2月','3月','4月','5月','6月','7月','8月','9月','10月'
  177. ]
  178. }
  179. ],
  180. yAxis : [
  181. {
  182. type : 'value',
  183. axisLabel : {
  184. formatter: '{value} %'
  185. },
  186. splitArea : {show : true}
  187. }
  188. ],
  189. series : [
  190. {
  191. name:'累计完成',
  192. type:'line',
  193. itemStyle: {
  194. normal: {
  195. lineStyle: {
  196. shadowColor : 'rgba(0,0,0,0.4)',
  197. shadowBlur: 5,
  198. shadowOffsetX: 3,
  199. shadowOffsetY: 3
  200. }
  201. }
  202. },
  203. data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
  204. },
  205. {
  206. name:'本月完成',
  207. type:'line',
  208. itemStyle: {
  209. normal: {
  210. lineStyle: {
  211. shadowColor : 'rgba(0,0,0,0.4)',
  212. shadowBlur: 5,
  213. shadowOffsetX: 3,
  214. shadowOffsetY: 3
  215. }
  216. }
  217. },
  218. data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
  219. }
  220. ]
  221. };
  222. // 为echarts对象加载数据
  223. myChart.setOption(option);
  224. //6 标段计量分布//
  225. </script>
  226. <!-- 删除已上报标段 -->
  227. <div id="del-confirm-1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  228. <div class="modal-dialog">
  229. <div class="modal-content">
  230. <div class="modal-header">
  231. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  232. <h4 class="modal-title">删除标段</h4>
  233. </div>
  234. <div class="modal-body">
  235. <div class="form">
  236. <form>
  237. <div class="alert alert-danger">
  238. GZ-HJDQ-JL-001 已有审批数据,请谨慎操作;
  239. <br>删除后,标段下的在线签署、中间计量图纸数据也将丢失,请谨慎操作;
  240. <br>需要删除,请在以下输入框输入"&nbsp;&nbsp;&nbsp;<b>删除标段</b>&nbsp;&nbsp;&nbsp;",再点击“确认删除”按钮。
  241. </div>
  242. <div class="form-group">
  243. <input class="form-control" type="text" placeholder="">
  244. </div>
  245. </form>
  246. </div>
  247. </div>
  248. <div class="modal-footer">
  249. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
  250. <button class="btn btn-danger">确认删除</button>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. <!-- 删除已上报标段 -->
  256. <!-- 删除未上报标段 -->
  257. <div id="del-confirm-2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  258. <div class="modal-dialog">
  259. <div class="modal-content">
  260. <div class="modal-header">
  261. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  262. <h4 class="modal-title">删除标段</h4>
  263. </div>
  264. <div class="modal-body">
  265. <div class="form">
  266. <form>
  267. <div class="alert alert-danger">
  268. 确认删除 GZ-HJDQ-JL-003 ?
  269. </div>
  270. </form>
  271. </div>
  272. </div>
  273. <div class="modal-footer">
  274. <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
  275. <button class="btn btn-danger">确认删除</button>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. <!-- 删除未上报标段 -->
  281. </body>