s-project-section.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  9. <link rel=stylesheet href="{{rootUrl}}global/css/bootstrap.css">
  10. <link rel=stylesheet href={{rootUrl}}global/css/style.css>
  11. <script src={{rootUrl}}global/js/jquery-1.9.1.min.js></script>
  12. <script src={{rootUrl}}global/js/bootstrap.js></script>
  13. <script src={{rootUrl}}global/js/jl.js></script>
  14. <script src={{rootUrl}}global/js/echarts.min.js></script>
  15. </head>
  16. <body>
  17. <!-- include "top" -->
  18. <div class="wrapContent">
  19. <!-- include "left" -->
  20. <div class="mainContainer">
  21. <!--内容-->
  22. <div class="mainContent">
  23. <div class="title clearfix">
  24. <ul class="nav nav-pills">
  25. <li class="dropdown"><a title="返回" href="{{rootUrl}}sproject/index"><span class="closePanel" aria-hidden="true" data-icon="Z"></span></a></li>
  26. <li class="dropdown">
  27. <a href="{{rootUrl}}sproject/{{currproArray.pid}}/section" data-toggle="dropdown" class="dropdown-toggle">
  28. {{currproArray.pname}}<b class="caret"></b>
  29. </a>
  30. <ul class="dropdown-menu">
  31. <!-- loop allproArray -->
  32. <li><a href="{{rootUrl}}sproject/{{allproArray' value.pid}}/section">{{allproArray' value.pname}}</a></li>
  33. <!-- endloop -->
  34. </ul>
  35. </li>
  36. </ul>
  37. </div>
  38. <div class="project">
  39. <div class="proSection clearfix">
  40. <!--图表5-->
  41. <div class="fL" style="width:30%">
  42. <div id="chartContainer6" style="height: 300px; width: 100%;">
  43. </div>
  44. </div>
  45. <!--图表5-->
  46. <!--表-->
  47. <div class="fL" style="width:70%;height:300px;overflow:hide">
  48. <table class="table table-striped">
  49. <thead>
  50. <tr>
  51. <th width="15%">标段名</th><th width="16%" class="taC">总价/期数</th><th width="40%" class="taC">截止上期完成/本期完成/未完成</th>
  52. </tr>
  53. </thead>
  54. </table>
  55. <div style="height:264px;overflow-y:auto">
  56. <table class="table table-striped">
  57. <!-- loop MeasureArray -->
  58. <tr>
  59. <td width="15%"><a href="{{rootUrl}}sproject/{{MeasureArray' value.pid}}/section/{{MeasureArray' value.pmid}}/detail">{{MeasureArray' value.pmname}}</a><br>{{MeasureArray' value.type}}</td><td width="16%" class="taR">¥<b>{{MeasureArray' value.totalplus}}</b><br>第 {{MeasureArray' value.totalnum}} 期(<span class="colOrange">{{MeasureArray' value.ownstatus}}</span>)</td><td width="40%" class="taR"><div class="progress">
  60. <div data-original-title="截止上期完成:¥{{MeasureArray' value.nstopnow}}" data-toggle="tooltip" data-placement="bottom" style="width: {{MeasureArray' value.dispstopnow}};" class="bar bar-success">{{MeasureArray' value.dispstopnow}}</div>
  61. <div data-original-title="本期完成:¥{{MeasureArray' value.ncurrdone}}" data-toggle="tooltip" data-placement="bottom" style="width:{{MeasureArray' value.dispcurrdone}}" class="bar">{{MeasureArray' value.dispcurrdone}}</div>
  62. <div data-original-title="未完成:¥{{MeasureArray' value.nless}}" data-toggle="tooltip" data-placement="bottom" style="width:{{MeasureArray' value.pless}}" class="bar bar-gary">{{MeasureArray' value.pless}}</div>
  63. </div></td>
  64. </tr>
  65. <!-- endloop -->
  66. </table>
  67. </div>
  68. </div>
  69. <!--表-->
  70. </div>
  71. <div class="proSection clearfix">
  72. <div id="chartContainer7" style="height: 300px; width: 100%;">
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <!--内容-->
  78. </div>
  79. </div>
  80. <script type="text/javascript">autoFlashHeight();</script>
  81. <script type="text/javascript">
  82. // 路径配置
  83. $(function () {
  84. //5 期数组成//
  85. // 基于准备好的dom,初始化echarts图表
  86. var myChart = echarts.init(document.getElementById('chartContainer6'));
  87. var option = {
  88. color: ['#e9af68', '#57b7b6', '#e4575a', '#959eac', '#6699FF',
  89. '#d38b70', '#8fb7cf', '#cd5c5c', '#ffa500', '#40e0d0',
  90. '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
  91. '#5c616b', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
  92. title: {
  93. text: '',
  94. x: 'left'
  95. },
  96. tooltip: {
  97. trigger: 'item',
  98. formatter: "{a} <br/>{b}:<br>{c} 元<br>占标段:{d} %"
  99. },
  100. calculable: true,
  101. series: [
  102. {
  103. name: '标段计量分布',
  104. type: 'pie',
  105. radius: '40%',
  106. center: ['50%', 155],
  107. data: [
  108. <!-- loop MeasureArray -->
  109. {value: {{MeasureArray' value.contracttotal}}, name: '{{MeasureArray' value.pmname}}'},
  110. <!-- endloop -->
  111. ]
  112. }
  113. ]
  114. };
  115. // 为echarts对象加载数据
  116. myChart.setOption(option);
  117. //5 期数组成//
  118. //6 标段计量分布//
  119. // 基于准备好的dom,初始化echarts图表
  120. var myChart2 = echarts.init(document.getElementById('chartContainer7'));
  121. var option = {
  122. color: ['#e9af68', '#57b7b6', '#e4575a', '#959eac', '#6699FF',
  123. '#d38b70', '#8fb7cf', '#cd5c5c', '#ffa500', '#40e0d0',
  124. '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
  125. '#5c616b', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
  126. title: {
  127. text: '标段按月进度'
  128. },
  129. tooltip: {
  130. trigger: 'axis',
  131. formatter: "{b} <br/>{a}:{c} %<br/>{a1}:{c1} %"
  132. },
  133. legend: {
  134. data:['累计完成','本月完成']
  135. },
  136. toolbox: {
  137. show: true,
  138. feature: {
  139. magicType: {show: true, type: ['line', 'bar']}
  140. }
  141. },
  142. dataZoom : {
  143. show : true,
  144. start :0,
  145. end : 100
  146. },
  147. xAxis: [
  148. {
  149. type: 'category',
  150. boundaryGap: true,
  151. data: [{{projectDate}}]
  152. }
  153. ],
  154. yAxis: [
  155. {
  156. type: 'value',
  157. axisLabel: {
  158. formatter: '{value} %'
  159. },
  160. splitArea : {show : true}
  161. }
  162. ],
  163. series: [
  164. {
  165. name: '累计完成',
  166. type: 'line',
  167. itemStyle: {
  168. normal: {
  169. lineStyle: {
  170. shadowColor: 'rgba(0,0,0,0.4)',
  171. shadowBlur: 5,
  172. shadowOffsetX: 3,
  173. shadowOffsetY: 3
  174. }
  175. }
  176. },
  177. data: [{{t1}}]
  178. },
  179. {
  180. name: '本月完成',
  181. type: 'line',
  182. itemStyle: {
  183. normal: {
  184. lineStyle: {
  185. shadowColor: 'rgba(0,0,0,0.4)',
  186. shadowBlur: 5,
  187. shadowOffsetX: 3,
  188. shadowOffsetY: 3
  189. }
  190. }
  191. },
  192. data: [{{t2}}]
  193. },
  194. ]
  195. };
  196. // 为echarts对象加载数据
  197. myChart2.setOption(option);
  198. //3 标段计量分布//
  199. });
  200. </script>
  201. </body>
  202. </html>