detail.ejs 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  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. <% if (ctx.session.sessionUser.is_admin) { %>
  104. <a href="/tender/<%- tender.id %>/shenpi" class="btn btn-sm btn-outline-primary">审批流程</a>
  105. <% } %>
  106. </div>
  107. </div>
  108. </div>
  109. <!--图表-->
  110. <div class="card mb-3">
  111. <div class="card-body">
  112. <h5 class="card-title">期进度表</h5>
  113. <div id="chartContainer4" style="height: 300px; width: 100%;">
  114. </div>
  115. </div>
  116. </div>
  117. <div class="card mb-3">
  118. <div class="card-body">
  119. <h5 class="card-title">月进度表</h5>
  120. <div id="chartContainer3" style="height: 300px; width: 100%;">
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <script src="/public/js/sub_menu.js"></script>
  130. <script>
  131. $.subMenu({
  132. menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
  133. toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
  134. key: 'menu.1.0.0',
  135. miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
  136. callback: function (info) {
  137. if (info.mini) {
  138. $('.panel-title').addClass('fluid');
  139. $('#sub-menu').removeClass('panel-sidebar');
  140. } else {
  141. $('.panel-title').removeClass('fluid');
  142. $('#sub-menu').addClass('panel-sidebar');
  143. }
  144. autoFlashHeight();
  145. }
  146. });
  147. </script>
  148. <script type="text/javascript">
  149. //4 标段期数计量进度//
  150. var myChart = echarts.init(document.getElementById('chartContainer4'));
  151. var option = {
  152. color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
  153. '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
  154. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  155. '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
  156. title : {
  157. text: '标段期进度'
  158. },
  159. tooltip : {
  160. trigger: 'axis',
  161. },
  162. calculable : true,
  163. legend: {
  164. data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
  165. },
  166. dataZoom: [
  167. {show: true, start: 0, end: 100}
  168. ],
  169. xAxis : [
  170. {
  171. type : 'category',
  172. splitLine : {show : true},
  173. data : [
  174. <% for (const s of stages) {%>
  175. '第<%- s.order %>期',
  176. <% } %>
  177. ]
  178. }
  179. ],
  180. yAxis : [
  181. {
  182. type : 'value',
  183. name : '金额',
  184. position:'left',
  185. axisLabel : {
  186. <% if (ctx.tender.info.display.thousandth) { %>
  187. formatter: function (value, index) {
  188. return value.format2Str('#,##0.######') + ' 元'
  189. }
  190. <% } else { %>
  191. formatter: '{value} 元'
  192. <% } %>
  193. },
  194. splitArea : {show : true},
  195. splitLine : {show : true},
  196. },
  197. {
  198. type : 'value',
  199. name:'完成度',
  200. axisLabel : {
  201. formatter: '{value} %'
  202. },
  203. position: 'right',
  204. splitArea : {show : false},
  205. splitLine : {show : false},
  206. }
  207. ],
  208. series : [
  209. {
  210. name:'本期合同计量',
  211. type:'bar',
  212. tooltip : {
  213. trigger: 'item',
  214. <% if (ctx.tender.info.display.thousandth) { %>
  215. formatter: function (params, ticket, callback) {
  216. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  217. }
  218. <% } else { %>
  219. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  220. <% } %>
  221. },
  222. stack: '合同',
  223. data:[
  224. <% for (const s of stages) {%>
  225. <%- s.contract_tp %>,
  226. <% } %>
  227. ]
  228. },
  229. {
  230. name:'本期数量变更计量',
  231. type:'bar',
  232. tooltip : {
  233. trigger: 'item',
  234. <% if (ctx.tender.info.display.thousandth) { %>
  235. formatter: function (params, ticket, callback) {
  236. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  237. }
  238. <% } else { %>
  239. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  240. <% } %>
  241. },
  242. stack: '变更',
  243. data:[
  244. <% for (const s of stages) {%>
  245. <%- s.qc_tp %>,
  246. <% } %>
  247. ]
  248. },
  249. {
  250. name:'截至上期累计完成',
  251. type:'bar',
  252. tooltip : {
  253. trigger: 'item',
  254. <% if (ctx.tender.info.display.thousandth) { %>
  255. formatter: function (params, ticket, callback) {
  256. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  257. }
  258. <% } else { %>
  259. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  260. <% } %>
  261. },
  262. stack: '完成',
  263. data:[
  264. <% for (const s of stages) {%>
  265. <%- ctx.helper.add(s.pre_contract_tp, s.pre_qc_tp) %>,
  266. <% } %>
  267. ]
  268. },
  269. {
  270. name:'本期完成计量',
  271. type:'bar',
  272. tooltip : {
  273. trigger: 'item',
  274. <% if (ctx.tender.info.display.thousandth) { %>
  275. formatter: function (params, ticket, callback) {
  276. return params.name + '<br/>' + params.seriesName + ': ' + params.value.format2Str('#,##0.######') + ' 元';
  277. }
  278. <% } else { %>
  279. tooltip : {trigger: 'item',formatter: "{b} <br/>{a}:{c}元"},
  280. <% } %>
  281. },
  282. stack: '完成',
  283. data:[
  284. <% for (const s of stages) {%>
  285. <%- ctx.helper.add(s.contract_tp, s.qc_tp) %>,
  286. <% } %>
  287. ]
  288. },
  289. {
  290. name:'完成度',
  291. type:'line',
  292. tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}:{c} %"},
  293. yAxisIndex: 1,
  294. data:[
  295. <% for (const s of stages) {%>
  296. <%- ctx.helper.mul(ctx.helper.div(ctx.helper.add(s.contract_tp, s.qc_tp), tender.sum, 2), 100) %>,
  297. <% } %>
  298. ]
  299. },
  300. ]
  301. };
  302. // 为echarts对象加载数据
  303. myChart.setOption(option);
  304. //4 标段期数计量进度//
  305. //3 标段月进度//
  306. // 基于准备好的dom,初始化echarts图表
  307. var myChart = echarts.init(document.getElementById('chartContainer3'));
  308. var option = {
  309. color:["#e9af68","#57b7b6"],
  310. title : {
  311. text: '标段月进度'
  312. },
  313. tooltip : {
  314. trigger: 'axis',
  315. formatter: function (params, ticket, callback) {
  316. let sHint = '';
  317. for (const param of params) {
  318. if (sHint !== '') {
  319. sHint += '<br>';
  320. }
  321. if (sHint === '' && param.name !== '') {
  322. sHint = param.name + '<br>';
  323. }
  324. sHint += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + param.color +'"></span>';
  325. if (param.data) {
  326. sHint += param.seriesName + ': ' + param.data + ' %';
  327. } else {
  328. sHint += param.seriesName + ': -';
  329. }
  330. }
  331. return sHint;
  332. },
  333. },
  334. legend: {
  335. data:['累计完成','本月完成']
  336. },
  337. toolbox: {
  338. show : true,
  339. feature : {
  340. magicType : {show: true, type: ['line', 'bar']}
  341. }
  342. },
  343. dataZoom : {
  344. show : true,
  345. start : 50,
  346. end : 100
  347. },
  348. xAxis : [
  349. {
  350. type : 'category',
  351. boundaryGap : true,
  352. data : [
  353. <% for (const mp of monthProgress) { %>
  354. '<%- mp.month %>',
  355. <% } %>
  356. ]
  357. }
  358. ],
  359. yAxis : [
  360. {
  361. type : 'value',
  362. axisLabel : {
  363. formatter: '{value} %'
  364. },
  365. splitArea : {show : true}
  366. }
  367. ],
  368. series : [
  369. {
  370. name:'累计完成',
  371. type:'line',
  372. itemStyle: {
  373. normal: {
  374. lineStyle: {
  375. shadowColor : 'rgba(0,0,0,0.4)',
  376. shadowBlur: 5,
  377. shadowOffsetX: 3,
  378. shadowOffsetY: 3
  379. }
  380. }
  381. },
  382. data:[
  383. <% for (const mp of monthProgress) { %>
  384. <%- mp.end_ratio %>,
  385. <% } %>
  386. ]
  387. },
  388. {
  389. name:'本月完成',
  390. type:'line',
  391. itemStyle: {
  392. normal: {
  393. lineStyle: {
  394. shadowColor : 'rgba(0,0,0,0.4)',
  395. shadowBlur: 5,
  396. shadowOffsetX: 3,
  397. shadowOffsetY: 3
  398. }
  399. }
  400. },
  401. data:[
  402. <% for (const mp of monthProgress) { %>
  403. <%- mp.ratio %>,
  404. <% } %>
  405. ]
  406. }
  407. ]
  408. };
  409. // 为echarts对象加载数据
  410. myChart.setOption(option);
  411. //3 标段月进度//
  412. </script>
  413. <script>
  414. </script>