detail.ejs 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  1. <% include ./tender_sub_menu.ejs %>
  2. <div class="panel-content">
  3. <div class="panel-title">
  4. <div class="title-main d-flex">
  5. <% include ./tender_sub_mini_menu.ejs %>
  6. <% if (tender.ledger_status !== audit.ledger.status.uncheck) { %>
  7. <h2>进行至
  8. <% if (lastStage) { %>
  9. 第<%- lastStage.order %>期<small class="<%- audit.stage.statusClass[lastStage.status] %>">(<%- audit.stage.statusString[lastStage.status] %>)</small>
  10. <% } else { %>
  11. 台账<small class="<%- audit.ledger.auditStringClass[tender.ledger_status] %>">(<%- audit.ledger.auditString[tender.ledger_status] %>)</small>
  12. <% } %>
  13. </h2>
  14. <% } %>
  15. <% if (cooperation) { %>
  16. <div>
  17. <a href="/tender/<%= tender.id %>/cooperation" class="btn btn-sm btn-light" ><i class="fa fa-users"></i> 协作办公</a>
  18. </div>
  19. <% } %>
  20. </div>
  21. </div>
  22. <div class="content-wrap">
  23. <div class="c-body">
  24. <div class="sjs-height-0">
  25. <div class="m-3">
  26. <!--金额概况-->
  27. <div class="row mx-0 mb-3">
  28. <div class="col-auto p-0">
  29. <div class="card text-center">
  30. <div class="card-body">
  31. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.total_price) %></h5>
  32. <p class="card-text text-muted">0号台帐</p>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="col-auto pr-0">
  37. <div class="card text-center">
  38. <div class="card-body">
  39. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.gather_tp) %></h5>
  40. <p class="card-text text-muted">本期完成</p>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="col-auto pr-0">
  45. <div class="card text-center">
  46. <div class="card-body">
  47. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.end_qc_tp) %><small class="text-danger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="占合同比例"><%- tender.qc_ratio %>%</small></h5>
  48. <p class="card-text text-muted">截止本期变更</p>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="col-auto pr-0">
  53. <div class="card text-center">
  54. <div class="card-body">
  55. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.end_gather_tp) %></h5>
  56. <p class="card-text text-muted">截止本期完成</p>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="col-auto pr-0">
  61. <div class="card text-center">
  62. <div class="card-body">
  63. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.pre_gather_tp) %></h5>
  64. <p class="card-text text-muted">截止上期完成</p>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="col-auto pr-0">
  69. <div class="card text-center">
  70. <div class="card-body">
  71. <h5 class="card-title"><%- ctx.helper.formatMoney(tender.yf_tp) %></h5>
  72. <p class="card-text text-muted">本期应付</p>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <!--进度条-->
  78. <div class="mb-3">
  79. <div class="progress">
  80. <% if (tender.pre_ratio > 0) { %>
  81. <div class="progress-bar bg-success" style="width: <%- tender.pre_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成:¥<%- ctx.helper.formatMoney(tender.pre_gather_tp) %>"><%- tender.pre_ratio %>%</div>
  82. <% } %>
  83. <% if (tender.cur_ratio > 0) { %>
  84. <div class="progress-bar bg-info" style="width: <%- tender.cur_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成:¥<%- ctx.helper.formatMoney(tender.gather_tp) %>"><%- tender.cur_ratio %>%</div>
  85. <% } %>
  86. <% if (tender.other_ratio > 0) { %>
  87. <div class="progress-bar bg-gray" style="width: <%- tender.other_ratio %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成:¥<%- ctx.helper.formatMoney(tender.other_tp) %>"><%- tender.other_ratio %>%</div>
  88. <% } %>
  89. </div>
  90. </div>
  91. <!--标段设置-->
  92. <div class="col-12 p-0 mb-3">
  93. <div class="card">
  94. <div class="card-body">
  95. <h5 class="card-title">标段设置</h5>
  96. <a href="#bd-set-1" data-toggle="modal" data-target="#bd-set-1" class="btn btn-sm btn-outline-primary">标段属性</a>
  97. <a href="#bd-set-2" data-toggle="modal" data-target="#bd-set-2" class="btn btn-sm btn-outline-primary">小数位数</a>
  98. <a href="#bd-set-3" data-toggle="modal" data-target="#bd-set-3" class="btn btn-sm btn-outline-primary">数量精度</a>
  99. <a href="#bd-set-4" data-toggle="modal" data-target="#bd-set-4" class="btn btn-sm btn-outline-primary">合同参数</a>
  100. <a href="#bd-set-5" data-toggle="modal" data-target="#bd-set-5" class="btn btn-sm btn-outline-primary">显示设置</a>
  101. <a href="#bd-set-6" data-toggle="modal" data-target="#bd-set-6" class="btn btn-sm btn-outline-primary">章节设置</a>
  102. <a href="#bd-set-7" data-toggle="modal" data-target="#bd-set-7" class="btn btn-sm btn-outline-primary">付款账号</a>
  103. </div>
  104. </div>
  105. </div>
  106. <!--图表-->
  107. <div class="card mb-3">
  108. <div class="card-body">
  109. <h5 class="card-title">期进度表</h5>
  110. <div id="chartContainer4" style="height: 300px; width: 100%;">
  111. </div>
  112. </div>
  113. </div>
  114. <div class="card mb-3">
  115. <div class="card-body">
  116. <h5 class="card-title">月进度表</h5>
  117. <div id="chartContainer3" style="height: 300px; width: 100%;">
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <script src="/public/js/sub_menu.js"></script>
  127. <script>
  128. $.subMenu({
  129. menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
  130. toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
  131. key: 'menu.1.0.0',
  132. miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
  133. callback: function (info) {
  134. if (info.mini) {
  135. $('.panel-title').addClass('fluid');
  136. $('#sub-menu').removeClass('panel-sidebar');
  137. } else {
  138. $('.panel-title').removeClass('fluid');
  139. $('#sub-menu').addClass('panel-sidebar');
  140. }
  141. autoFlashHeight();
  142. }
  143. });
  144. </script>
  145. <script type="text/javascript">
  146. //4 标段期数计量进度//
  147. var myChart = echarts.init(document.getElementById('chartContainer4'));
  148. var option = {
  149. color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
  150. '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
  151. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  152. '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
  153. title : {
  154. text: '标段期进度'
  155. },
  156. tooltip : {
  157. trigger: 'axis',
  158. },
  159. calculable : true,
  160. legend: {
  161. data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
  162. },
  163. dataZoom: [
  164. {show: true, start: 0, end: 100}
  165. ],
  166. xAxis : [
  167. {
  168. type : 'category',
  169. splitLine : {show : true},
  170. data : [
  171. <% for (const s of stages) {%>
  172. '第<%- s.order %>期',
  173. <% } %>
  174. ]
  175. }
  176. ],
  177. yAxis : [
  178. {
  179. type : 'value',
  180. name : '金额',
  181. position:'left',
  182. axisLabel : {
  183. <% if (ctx.tender.info.display.thousandth) { %>
  184. formatter: function (value, index) {
  185. return value.format2Str('#,##0.######') + ' 元'
  186. }
  187. <% } else { %>
  188. formatter: '{value} 元'
  189. <% } %>
  190. },
  191. splitArea : {show : true},
  192. splitLine : {show : true},
  193. },
  194. {
  195. type : 'value',
  196. name:'完成度',
  197. axisLabel : {
  198. formatter: '{value} %'
  199. },
  200. position: 'right',
  201. splitArea : {show : false},
  202. splitLine : {show : false},
  203. }
  204. ],
  205. series : [
  206. {
  207. name:'本期合同计量',
  208. type:'bar',
  209. tooltip : {
  210. trigger: 'item',
  211. <% if (ctx.tender.info.display.thousandth) { %>
  212. formatter: function (params, ticket, callback) {
  213. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  214. }
  215. <% } else { %>
  216. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  217. <% } %>
  218. },
  219. stack: '合同',
  220. data:[
  221. <% for (const s of stages) {%>
  222. <%- s.contract_tp %>,
  223. <% } %>
  224. ]
  225. },
  226. {
  227. name:'本期数量变更计量',
  228. type:'bar',
  229. tooltip : {
  230. trigger: 'item',
  231. <% if (ctx.tender.info.display.thousandth) { %>
  232. formatter: function (params, ticket, callback) {
  233. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  234. }
  235. <% } else { %>
  236. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  237. <% } %>
  238. },
  239. stack: '变更',
  240. data:[
  241. <% for (const s of stages) {%>
  242. <%- s.qc_tp %>,
  243. <% } %>
  244. ]
  245. },
  246. {
  247. name:'截至上期累计完成',
  248. type:'bar',
  249. tooltip : {
  250. trigger: 'item',
  251. <% if (ctx.tender.info.display.thousandth) { %>
  252. formatter: function (params, ticket, callback) {
  253. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  254. }
  255. <% } else { %>
  256. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  257. <% } %>
  258. },
  259. stack: '完成',
  260. data:[
  261. <% for (const s of stages) {%>
  262. <%- ctx.helper.add(s.pre_contract_tp, s.pre_qc_tp) %>,
  263. <% } %>
  264. ]
  265. },
  266. {
  267. name:'本期完成计量',
  268. type:'bar',
  269. tooltip : {
  270. trigger: 'item',
  271. <% if (ctx.tender.info.display.thousandth) { %>
  272. formatter: function (params, ticket, callback) {
  273. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  274. }
  275. <% } else { %>
  276. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  277. <% } %>
  278. },
  279. stack: '完成',
  280. data:[
  281. <% for (const s of stages) {%>
  282. <%- ctx.helper.add(s.contract_tp, s.qc_tp) %>,
  283. <% } %>
  284. ]
  285. },
  286. {
  287. name:'完成度',
  288. type:'line',
  289. tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}:{c} %"},
  290. yAxisIndex: 1,
  291. data:[
  292. <% for (const s of stages) {%>
  293. <%- ctx.helper.mul(ctx.helper.div(ctx.helper.add(s.contract_tp, s.qc_tp), tender.sum, 2), 100) %>,
  294. <% } %>
  295. ]
  296. },
  297. ]
  298. };
  299. // 为echarts对象加载数据
  300. myChart.setOption(option);
  301. //4 标段期数计量进度//
  302. //3 标段月进度//
  303. // 基于准备好的dom,初始化echarts图表
  304. var myChart = echarts.init(document.getElementById('chartContainer3'));
  305. var option = {
  306. color:["#e9af68","#57b7b6"],
  307. title : {
  308. text: '标段月进度'
  309. },
  310. tooltip : {
  311. trigger: 'axis',
  312. formatter: function (params, ticket, callback) {
  313. let sHint = '';
  314. for (const param of params) {
  315. if (sHint !== '') {
  316. sHint += '<br>';
  317. }
  318. if (sHint === '' && param.name !== '') {
  319. sHint = param.name + '<br>';
  320. }
  321. sHint += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + param.color +'"></span>';
  322. if (param.data) {
  323. sHint += param.seriesName + ': ' + param.data + ' %';
  324. } else {
  325. sHint += param.seriesName + ': -';
  326. }
  327. }
  328. return sHint;
  329. },
  330. },
  331. legend: {
  332. data:['累计完成','本月完成']
  333. },
  334. toolbox: {
  335. show : true,
  336. feature : {
  337. magicType : {show: true, type: ['line', 'bar']}
  338. }
  339. },
  340. dataZoom : {
  341. show : true,
  342. start : 50,
  343. end : 100
  344. },
  345. xAxis : [
  346. {
  347. type : 'category',
  348. boundaryGap : true,
  349. data : [
  350. <% for (const mp of monthProgress) { %>
  351. '<%- mp.month %>',
  352. <% } %>
  353. ]
  354. }
  355. ],
  356. yAxis : [
  357. {
  358. type : 'value',
  359. axisLabel : {
  360. formatter: '{value} %'
  361. },
  362. splitArea : {show : true}
  363. }
  364. ],
  365. series : [
  366. {
  367. name:'累计完成',
  368. type:'line',
  369. itemStyle: {
  370. normal: {
  371. lineStyle: {
  372. shadowColor : 'rgba(0,0,0,0.4)',
  373. shadowBlur: 5,
  374. shadowOffsetX: 3,
  375. shadowOffsetY: 3
  376. }
  377. }
  378. },
  379. data:[
  380. <% for (const mp of monthProgress) { %>
  381. <%- mp.end_ratio %>,
  382. <% } %>
  383. ]
  384. },
  385. {
  386. name:'本月完成',
  387. type:'line',
  388. itemStyle: {
  389. normal: {
  390. lineStyle: {
  391. shadowColor : 'rgba(0,0,0,0.4)',
  392. shadowBlur: 5,
  393. shadowOffsetX: 3,
  394. shadowOffsetY: 3
  395. }
  396. }
  397. },
  398. data:[
  399. <% for (const mp of monthProgress) { %>
  400. <%- mp.ratio %>,
  401. <% } %>
  402. ]
  403. }
  404. ]
  405. };
  406. // 为echarts对象加载数据
  407. myChart.setOption(option);
  408. //3 标段月进度//
  409. </script>
  410. <script>
  411. </script>