r-project-section-detail-APP.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  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="initial-scale=1, maximum-scale=1,user-scalable=no">
  9. <link rel=stylesheet href="{{rootUrl}}global/css/app/bootstrap.css">
  10. <link rel=stylesheet href="{{rootUrl}}global/css/app/style.css">
  11. <script src="{{rootUrl}}global/js/jquery-1.9.1.min.js"></script>
  12. <script src="{{rootUrl}}global/js/app/bootstrap.js"></script>
  13. <script src="{{rootUrl}}global/js/app/global.js"></script>
  14. <script src="{{rootUrl}}global/js/app/echarts.min.js"></script>
  15. </head>
  16. <body>
  17. <div class="wrapContent">
  18. <div class="wrapNav">
  19. <ul class="nav nav-tabs" role="tablist">
  20. <li role="presentation" <!-- if !zhisset({{approval}}) -->class="active"<!-- endif -->><a href="#home" aria-controls="home" role="tab" data-toggle="tab">标段概况</a></li>
  21. <li role="presentation" <!-- if zhisset({{approval}}) -->class="active"<!-- endif -->><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">审批</a></li>
  22. </ul>
  23. </div>
  24. <div class="tab-content">
  25. <div role="tabpanel" class="tab-pane <!-- if !zhisset({{approval}}) -->active<!-- endif -->" id="home">
  26. <div class="project">
  27. <div class="proSection">
  28. <!--图表4-->
  29. <div id="chartContainer4" style="height: 350px; width: 100%;">
  30. </div>
  31. <!--图表5-->
  32. <div id="chartContainer5" style="height: 300px; width: 100%;">
  33. </div>
  34. </div>
  35. <div class="projectSeList">
  36. <!-- loop MeasureArray3 -->
  37. <dl class="projectTable">
  38. <dt>第{{ToChinaseNum(MeasureArray3' value.numpname)}}期(上报:{{formatDate(MeasureArray3' value.intime,'Y-m-d')}} <!-- if {{MeasureArray3' value.audittime}}!='0' -->;通过:{{formatDate(MeasureArray3' value.audittime,'Y-m-d')}}<!-- endif -->)</dt>
  39. <dd>
  40. <table class="table table-hover">
  41. <tr>
  42. <td>
  43. <p>本期合同计量</p>
  44. <b>¥{{MeasureArray3' value.currcontractval}}</b>
  45. </td>
  46. <td>
  47. <p>本期数量变更计量</p>
  48. <b>¥{{MeasureArray3' value.currchangeval}}</b>
  49. </td>
  50. </tr>
  51. <tr>
  52. <td>
  53. <p>截止上期完成</p>
  54. <b>¥{{MeasureArray3' value.stopnowtotal}}</b>
  55. </td>
  56. <td>
  57. <p>本期完成计量</p>
  58. <b>¥{{MeasureArray3' value.currdone}}</b>
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>
  63. <p>截止本期完成</p>
  64. <b>¥{{MeasureArray3' value.curralltotal}}</b>
  65. </td>
  66. <td></td>
  67. </tr>
  68. </table>
  69. </dd>
  70. </dl>
  71. <!-- endloop -->
  72. </div>
  73. </div>
  74. </div>
  75. <div role="tabpanel" class="tab-pane <!-- if zhisset({{approval}}) -->active<!-- endif -->" id="profile">
  76. <div class="project">
  77. <div class="projectSeList mT2">
  78. <!-- loop MeasureArray2 -->
  79. <dl class="projectTable">
  80. <dt>第{{ToChinaseNum(MeasureArray2' value.numpname)}}期(上报:{{formatDate(MeasureArray2' value.intime,'Y-m-d')}} <!-- if {{MeasureArray2' value.audittime}}!='0' -->;通过:{{formatDate(MeasureArray2' value.audittime,'Y-m-d')}}<!-- endif -->)</dt>
  81. <dd>
  82. <table class="table table-hover">
  83. <tr>
  84. <td>
  85. <p>本期合同计量</p>
  86. <b>¥{{MeasureArray2' value.currcontractval}}</b>
  87. </td>
  88. <td>
  89. <p>本期数量变更计量</p>
  90. <b>¥{{MeasureArray2' value.currchangeval}}</b>
  91. </td>
  92. </tr>
  93. <tr>
  94. <td>
  95. <p>截止上期累计完成</p>
  96. <b>¥{{MeasureArray2' value.stopnowtotal}}</b>
  97. </td>
  98. <td>
  99. <p>本期完成计量</p>
  100. <b>¥{{MeasureArray2' value.currdone}}</b>
  101. </td>
  102. </tr>
  103. <tr>
  104. <td>
  105. <p>累计完成计量</p>
  106. <b>¥{{MeasureArray2' value.curralltotal}}</b>
  107. </td>
  108. <td></td>
  109. </tr>
  110. </table>
  111. </dd>
  112. </dl>
  113. <!-- endloop -->
  114. </div>
  115. </div>
  116. <div class="approvalList">
  117. <ul>
  118. <!-- if {{orginArray.time}} != '1970-01-01' -->
  119. <li>
  120. {{orginArray.statushtml}}
  121. <div class="approvalView"></div>
  122. </li>
  123. <!-- endif -->
  124. <!-- loop auditArray -->
  125. <li>
  126. {{auditArray' value.statushtml}}
  127. <div class="approvalView">{{auditArray' value.auditcontent}}</div>
  128. </li>
  129. <!-- endloop -->
  130. </ul>
  131. </div>
  132. <!-- if {{mastatus}}=='checking' -->
  133. <div class="bottomToolsbar">
  134. <div class="bottomView">
  135. <form>
  136. <div class="form-group">
  137. <label>审批意见</label>
  138. <textarea class="form-control" rows="3"></textarea>
  139. </div>
  140. </form>
  141. </div>
  142. <ul>
  143. <li><button type="button" class="submit btn-danger" data-toggle="modal" data-target="#myModalUnpass">审批不通过</button></li>
  144. <li><button type="button" class="submit btn-success" data-toggle="modal" data-target="#myModalPass">审批通过</button></li>
  145. </ul>
  146. </div>
  147. <div class="modal fade modalWrap" id="myModalUnpass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  148. <div class="modal-dialog" role="document">
  149. <div class="modal-content">
  150. <div class="modal-header">
  151. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  152. <h4 class="modal-title">审批意见</h4>
  153. </div>
  154. <div class="modal-body">
  155. <!-- <h4><p>审批意见</p></h4> -->
  156. <form>
  157. <textarea name="content" id="content" class="form-control" rows="3" placeholder="填写审批意见"></textarea>
  158. </form>
  159. </div>
  160. <div class="modal-footer">
  161. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  162. <button type="button" class="btn btn-danger auditclass" act="np" maid="{{maid}}" pmid="{{pmid}}" numpname="{{numpname}}" times="{{times}}">确认审批不通过</button>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <div class="modal fade modalWrap" id="myModalPass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  168. <div class="modal-dialog" role="document">
  169. <div class="modal-content">
  170. <div class="modal-header">
  171. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  172. <h4 class="modal-title">审批意见</h4>
  173. </div>
  174. <div class="modal-body">
  175. <!-- <h4><p>审批意见</p></h4> -->
  176. <form>
  177. <textarea name="content" id="content2" class="form-control" rows="3" placeholder="填写审批意见"></textarea>
  178. </form>
  179. </div>
  180. <div class="modal-footer">
  181. <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  182. <button type="button" class="btn btn-success auditclass" act="p" maid="{{maid}}" pmid="{{pmid}}" numpname="{{numpname}}"
  183. times="{{times}}" id="pass">确认审批通过</button>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!-- endif -->
  189. </div>
  190. </div>
  191. </div>
  192. <script type="text/javascript">
  193. $(function(){
  194. $('#chartContainer4').css('width',(parseInt($(window).width())-36+'px'));
  195. $('#chartContainer5').css('width',(parseInt($(window).width())-36+'px'));
  196. //4 标段期数计量进度//
  197. var myChart = echarts.init(document.getElementById('chartContainer4'));
  198. var option = {
  199. color: ['#e9af68', '#57b7b6', '#e4575a', '#959eac', '#6699FF',
  200. '#d38b70', '#8fb7cf', '#cd5c5c', '#ffa500', '#40e0d0',
  201. '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
  202. '#5c616b', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
  203. tooltip: {
  204. trigger: 'axis'
  205. },
  206. calculable: true,
  207. legend: {
  208. data: ['本期合同计量', '本期数量变更计量', '截止上期完成', '本期完成计量', '完成度']
  209. },
  210. dataZoom : {
  211. show : true,
  212. start :0,
  213. end : 100
  214. },
  215. xAxis: [
  216. {
  217. type: 'category',
  218. splitLine: {show: true},
  219. data: [
  220. <!-- loop MeasureArray -->
  221. "第{{ToChinaseNum(MeasureArray' value.numpname)}}期",
  222. <!-- endloop -->
  223. ]
  224. }
  225. ],
  226. grid:[
  227. {
  228. x2:'40',
  229. top:'25%',
  230. bottom:'20%',
  231. left:'13%'
  232. }
  233. ],
  234. yAxis: [
  235. {
  236. type: 'value',
  237. position: 'left',
  238. splitArea: {show: true}
  239. },
  240. {
  241. type: 'value',
  242. name: '完成度',
  243. axisLabel: {
  244. formatter: '{value} %'
  245. },
  246. position: 'right',
  247. splitArea: {show: false},
  248. splitLine: {show: false}
  249. }
  250. ],
  251. series: [
  252. {
  253. name: '本期合同计量',
  254. type: 'bar',
  255. tooltip: {trigger: 'item', formatter: "{b} <br/>{a}:{c}元"},
  256. stack: '合同',
  257. data: [
  258. <!-- loop MeasureArray -->
  259. {{MeasureArray' value.currcontractval}},
  260. <!-- endloop -->
  261. ]
  262. },
  263. {
  264. name: '本期数量变更计量',
  265. type: 'bar',
  266. tooltip: {trigger: 'item', formatter: "{b} <br/>{a}:{c}元"},
  267. stack: '合同',
  268. data: [
  269. <!-- loop MeasureArray -->
  270. {{MeasureArray' value.currchangeval}},
  271. <!-- endloop -->
  272. ]
  273. },
  274. {
  275. name: '截止上期完成',
  276. type: 'bar',
  277. tooltip: {trigger: 'item', formatter: "{b} <br/>{a}:{c}元"},
  278. stack: '完成',
  279. data: [
  280. <!-- loop MeasureArray -->
  281. {{MeasureArray' value.stopnowtotal}},
  282. <!-- endloop -->
  283. ]
  284. },
  285. {
  286. name: '本期完成计量',
  287. type: 'bar',
  288. tooltip: {trigger: 'item', formatter: "{b} <br/>{a}:{c}元"},
  289. stack: '完成',
  290. data: [
  291. <!-- loop MeasureArray -->
  292. {{MeasureArray' value.currdone}},
  293. <!-- endloop -->
  294. ]
  295. },
  296. {
  297. name: '完成度',
  298. type: 'line',
  299. tooltip: {trigger: 'axis', formatter: "{b}占总标段<br/>{a}:{c} %"},
  300. yAxisIndex: 1,
  301. data: [
  302. <!-- loop MeasureArray -->
  303. {{MeasureArray' value.lessTotal}},
  304. <!-- endloop -->
  305. ]
  306. },
  307. ]
  308. };
  309. // 为echarts对象加载数据
  310. myChart.setOption(option);
  311. //4 标段期数计量进度//
  312. //5 期数组成//
  313. var myChart2 = echarts.init(document.getElementById('chartContainer5'));
  314. var option2 = {
  315. color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
  316. '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
  317. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  318. '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
  319. title : {
  320. text: '期数计量组成',
  321. x:'left'
  322. },
  323. tooltip : {
  324. trigger: 'item',
  325. formatter: "{a} <br/>{b}:{c} 元<br>占标段:{d} %"
  326. },
  327. calculable : true,
  328. series : [
  329. {
  330. name:'标段计量分布',
  331. type:'pie',
  332. // roseType: 'angle',
  333. radius : '40%',
  334. center: ['50%', 155],
  335. data:[
  336. <!-- loop MeasureArray -->{value: {{MeasureArray' value.currdone}}, name: '第{{ToChinaseNum(MeasureArray' value.numpname)}}期'},
  337. <!-- endloop -->]
  338. }
  339. ]
  340. };
  341. // 为echarts对象加载数据
  342. myChart2.setOption(option2);
  343. //5 期数组成//
  344. });
  345. </script>
  346. <script type="text/javascript">
  347. $(document).ready(function () {
  348. $(".auditclass").click(function () {
  349. var pmid = $(this).attr('pmid');
  350. var numpname = $(this).attr('numpname');
  351. var times = $(this).attr('times');
  352. var content = $(this).parent().parent().find("textarea").val();
  353. var act = $(this).attr('act');
  354. var maid = $(this).attr('maid');
  355. $.ajax({
  356. type: "POST",
  357. dataType: "json",
  358. cache: false,
  359. data: {"act": act, "pmid": pmid, "numpname": numpname, "times": times, "content": content},
  360. url: "/app/rproject/{{pid}}/section/{{pmid}}/detail?uid={{uid}}",
  361. success: function (data) {
  362. if (data['status'] == 1) {
  363. window.location.href = "{{rootUrl}}app/rproject/{{pid}}/section/{{pmid}}/detail?uid={{uid}}&approval=1";
  364. }
  365. }
  366. });
  367. });
  368. })
  369. </script>
  370. </body>