index_cost.ejs 60 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265
  1. <link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
  2. <div class="panel-content" style="background:#2c3237 !important">
  3. <div class="panel-title fluid border-top-0" style="background:#2c3237 !important">
  4. <div class="title-main d-flex justify-content-between">
  5. <div class="d-inline-block mr-2">
  6. <div class="btn-group" id="first-category">
  7. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
  8. <div class="dropdown-menu" aria-labelledby="zhankai">
  9. <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
  10. <% if (categoryData.length > 0 && categoryData[0].value.length > 0) { %>
  11. <% for (const c of categoryData[0].value) { %>
  12. <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
  13. <% } %>
  14. <% } %>
  15. </div>
  16. </div>
  17. <% if (categoryData[1] && categoryData[1].value.length > 0) { %>
  18. <div class="btn-group" id="second-category" style="display: none">
  19. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
  20. <div class="dropdown-menu" aria-labelledby="zhankai">
  21. <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
  22. <% for (const c of categoryData[1].value) { %>
  23. <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
  24. <% } %>
  25. </div>
  26. </div>
  27. <% } %>
  28. <% if (categoryData[2] && categoryData[2].value.length > 0) { %>
  29. <div class="btn-group" id="third-category" style="display: none">
  30. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
  31. <div class="dropdown-menu" aria-labelledby="zhankai">
  32. <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
  33. <% for (const c of categoryData[2].value) { %>
  34. <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
  35. <% } %>
  36. </div>
  37. </div>
  38. <% } %>
  39. </div>
  40. <div>
  41. <a href="javascript:void(0)" title="全屏显示" id="showFull" class="text-white"><i class="fa fa-arrows-alt"></i></a>
  42. <div class="btn-group">
  43. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">成本管理</button>
  44. <div class="dropdown-menu" aria-labelledby="zhankai">
  45. <% for (const i of ctx.subProject.data_collect_pages) { %>
  46. <a class="dropdown-item" href="/sp/<%- ctx.subProject.id %>/datacollect/index/<%- i %>"><% if (i === '7') { %>成本管理<% } else if (i === '8') { %>投资总控<% } else { %>决策大屏<%- i %><% } %></a>
  47. <% } %>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="content-wrap" id="big-data">
  54. <div style="height: 30px;background-color: #2c3237; display: none" id="exitfull-div">
  55. <div class="title-main d-flex">
  56. <div class="ml-auto">
  57. <div class="dropdown d-flex float-left mt-1 mr-2">
  58. <button id="exitFull" class="btn btn-sm btn-secondary ml-auto">退出全屏</button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="c-body" style="background:#2c3237 !important">
  64. <div class="flex-content">
  65. <div class="row mx-2" style="height: 95.5vh">
  66. <div class="col-9 px-0 height-100">
  67. <div class="row m-0 px-0 mb-2" style="height: 50%;">
  68. <div class="col-4 px-0 bg-dark height-100">
  69. <div class="col-12 text-white pt-2">
  70. <div class="card-big-htext">| 金额对比<span class="float-right mr-2">万元&nbsp;</span></div>
  71. </div>
  72. <div class="col-12 pb-2 text-white m-0 mt-2 bg-dark" style="height: 89%;overflow: auto;">
  73. <style>
  74. .level1-table tbody tr td {
  75. padding: 6px 10px; /* 默认一般是 8~16px,可根据需要继续调小 */
  76. line-height: 1.2;
  77. border-bottom: 1px solid rgba(255,255,255,0.2);
  78. }
  79. .level1-table tbody tr:last-child td {
  80. border-bottom: none;
  81. }
  82. </style>
  83. <table class="level1-table" style="width: 100%; height: 100%;">
  84. <thead style="height: 50px;border-bottom: 1px solid rgba(255,255,255,0.2);background-color: #2C3034;">
  85. <tr class="text-center">
  86. <th>分类</th>
  87. <th>责任成本</th>
  88. <th>实际成本</th>
  89. </tr>
  90. </thead>
  91. <tbody>
  92. <tr>
  93. <td>项目收入</td>
  94. <td class="text-center data_duty_total_in_tp"></td>
  95. <td class="text-center data_total_in_tp"></td>
  96. </tr>
  97. <tr>
  98. <td>项目成本</td>
  99. <td class="text-center data_duty_total_out_tp"></td>
  100. <td class="text-center data_total_out_tp"></td>
  101. </tr>
  102. <tr>
  103. <td>利润</td>
  104. <td class="text-center data_duty_total_profit"></td>
  105. <td class="text-center data_total_profit"></td>
  106. </tr>
  107. <tr>
  108. <td>利润率</td>
  109. <td class="text-center data_duty_total_profit_percent"></td>
  110. <td class="text-center data_total_profit_percent"></td>
  111. </tr>
  112. </tbody>
  113. </table>
  114. </div>
  115. </div>
  116. <div class="col-8 px-0 height-100">
  117. <div class="row mx-2 mb-2 height-100 bg-dark">
  118. <div class="col-12 text-white pt-2 pl-3">
  119. <div class="card-big-htext">| 标段利润及利润率<span class="float-right mr-2">万元&nbsp;</span></div>
  120. </div>
  121. <div class="col-12 m-0" style="height: 88%">
  122. <div class="jlchart" data-chart-num="1" id="jlchart" style="height: 100%; width: 100%;"></div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="row m-0 px-0 mr-2 bg-dark" style="height: 49%;">
  128. <div class="col-12 text-white pt-2 pl-3">
  129. <div class="card-big-htext">| 累计计量<span class="float-right mr-2">万元&nbsp;</span></div>
  130. </div>
  131. <div class="col-12 m-0" style="height: 88%">
  132. <div class="jldbchart" id="jldbchart" style="height: 100%; width: 100%;"></div>
  133. </div>
  134. </div>
  135. </div>
  136. <div class="col-3 px-0 height-100">
  137. <div class="row mb-2 bg-dark m-0 p-0" style="height: 31.2vh">
  138. <div class="col-12 text-white pt-2 pl-3">
  139. <div class="card-big-htext">| 期数统计<span class="float-right mr-2">&nbsp;</span></div>
  140. </div>
  141. <!-- <h6 class="card bg-dark text-center text-white m-0 pt-2 pb-3">期数统计</h6>-->
  142. <div class="col-12 p-0 m-0 right-month-height">
  143. <div class="row p-0 m-0 height-100">
  144. <div class="col-6 px-0 height-50">
  145. <div class="card text-center bg-dark text-white border-0 height-100">
  146. <div class="card-body card-small-body height-100">
  147. <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="stage_num">0</span></h5>
  148. <p class="card-text text-muted height-50">计量期</p>
  149. </div>
  150. </div>
  151. </div>
  152. <div class="col-6 px-0 height-50">
  153. <div class="card text-center bg-dark text-white border-0 height-100">
  154. <div class="card-body card-small-body height-100">
  155. <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_ledger_num">0</span></h5>
  156. <p class="card-text text-muted height-50">成本报审</p>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="col-6 px-0 height-50">
  161. <div class="card text-center bg-dark text-white border-0 border-top-0 height-100">
  162. <div class="card-body card-small-body height-100">
  163. <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_book_num">0</span></h5>
  164. <p class="card-text text-muted height-50">财务账面</p>
  165. </div>
  166. </div>
  167. </div>
  168. <div class="col-6 px-0 height-50">
  169. <div class="card text-center bg-dark text-white border-0 height-100">
  170. <div class="card-body card-small-body height-100">
  171. <h5 class="card-title text-center height-50" style="font-size: 2.80rem;line-height: 200%"><span class="cost_analysis_num">0</span></h5>
  172. <p class="card-text text-muted height-50">成本分析</p>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="m-0 mb-2 bg-dark p-0" style="height: 31.2vh">
  180. <div class="row mx-0 mb-2 height-100">
  181. <div class="col-12 text-white pt-2 pl-3">
  182. <div class="card-big-htext">| 利润占比<span class="float-right mr-2">万元&nbsp;</span></div>
  183. </div>
  184. <div class="col-12 m-0" style="height: 88%">
  185. <div class="jlwcdchart" id="jlwcdchart" style="height: 100%; width: 100%;"></div>
  186. </div>
  187. </div>
  188. </div>
  189. <div class="m-0 mb-2 bg-dark p-0" style="height: 31.3vh">
  190. <div class="height-100">
  191. <div class="col-12 text-white pt-2 pl-3">
  192. <div class="card-big-htext">| 利润率排名<span class="float-right mr-2">&nbsp;</span></div>
  193. </div>
  194. <div class="tablebox mt-2" style="height: 80%">
  195. <table id="profit_tableId">
  196. <thead>
  197. <tr class="text-center">
  198. <th width="50">排名</th>
  199. <th>标段</th>
  200. <th width="80">利润率</th>
  201. </tr>
  202. </thead>
  203. <tbody class="tender-data">
  204. </tbody>
  205. </table>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <script src="/public/js/path_tree.js"></script>
  216. <script src="/public/js/shares/tenders2tree.js"></script>
  217. <script src="/public/js/datacollect_scroll.js"></script>
  218. <script type="text/javascript"> autoFlashHeight();</script>
  219. <script type="text/javascript">
  220. // 利润排名占比饼图表
  221. var chart1 = document.getElementsByClassName('jlwcdchart');
  222. option1 = {
  223. tooltip : {
  224. trigger: 'item',
  225. formatter: "{a} <br/>{b} : {c} ({d}%)",
  226. // 当前鼠标位置
  227. // position: 'top',
  228. },
  229. title: {
  230. },
  231. color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
  232. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  233. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  234. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  235. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  236. 'rgba(242, 179, 82, 0.7)'],
  237. backgroundColor: '#343a40 ',
  238. // tooltip: {
  239. // trigger: 'item'
  240. // },
  241. // legend: {
  242. // orient: 'vertical',
  243. // left: 'center',
  244. // },
  245. series: [
  246. {
  247. name: '利润金额',
  248. type: 'pie',
  249. radius: '65%',
  250. top:'2%',
  251. formatter: function(name){
  252. return name.length>10?name.substr(0,10)+"...":name;
  253. },
  254. data: [],
  255. emphasis: {
  256. itemStyle: {
  257. shadowBlur: 10,
  258. shadowOffsetX: 0,
  259. shadowColor: 'rgba(0, 0, 0, 0.5)'
  260. }
  261. }
  262. }
  263. ]
  264. };
  265. var myChart1_1 = echarts.init(chart1[0], 'dark');
  266. myChart1_1.setOption(option1);
  267. // 利润统计状图表
  268. option2 = {
  269. title: {
  270. },
  271. color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
  272. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  273. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  274. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  275. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  276. 'rgba(242, 179, 82, 0.7)'],
  277. backgroundColor: '#343a40 ',
  278. tooltip: {
  279. trigger: 'axis',
  280. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  281. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  282. },
  283. formatter: function (params) {
  284. let html = params[0].axisValue + '<br/>';
  285. params.forEach(function (item) {
  286. let value = item.value;
  287. if (item.seriesName === '利润率') {
  288. value += '%';
  289. }
  290. html += `
  291. <div style="display:flex;justify-content:space-between;min-width:150px;">
  292. <span>${item.marker}${item.seriesName}</span>
  293. <span style="font-weight:bold;">${value}</span>
  294. </div>
  295. `;
  296. });
  297. return html;
  298. }
  299. },
  300. dataZoom: [
  301. {
  302. brushSelect:false,
  303. // zoomLock: false,
  304. type: 'slider',
  305. show: true,
  306. realtime: true,
  307. showdetail: false,
  308. showDataShadow: false,
  309. // dataZoomIndex: 10,
  310. start: 0,
  311. end: 8,
  312. handleSize: 0,
  313. height: 10,
  314. bottom: '10%',
  315. },
  316. ],
  317. legend: {
  318. top: '5%',
  319. left: 'center',
  320. data: ['利润', '利润率'],
  321. textStyle: {
  322. color: '#fff',
  323. fontSize: 14
  324. },
  325. icon: 'roundRect' // 可选:rect、circle、roundRect
  326. },
  327. grid: {
  328. top:'25%',
  329. left: '3%',
  330. right: '4%',
  331. bottom: '15%',
  332. containLabel: true
  333. },
  334. xAxis: [
  335. {
  336. type: 'category',
  337. data: [],
  338. axisLabel: {
  339. show: true,
  340. interval: 0,
  341. textStyle: {
  342. color: "#fff",
  343. fontSize: 14
  344. },
  345. formatter: function(value) {
  346. var res = value;
  347. if(res.length > 6) {
  348. res = res.substring(0, 5) + "..";
  349. }
  350. return res;
  351. }
  352. }
  353. }
  354. ],
  355. yAxis: [
  356. {
  357. type: 'value',
  358. name:'',
  359. position: 'left',
  360. axisLabel : {
  361. formatter: function (value, index) {
  362. if (value < 0) {
  363. let newValue = Math.abs(value);
  364. if (newValue >= 10000 && newValue < 10000000) {
  365. newValue = newValue / 10000 + "万";
  366. } else if (newValue >= 10000000) {
  367. newValue = newValue / 10000000 + "千万";
  368. }
  369. value = '-' + newValue;
  370. }
  371. if (value >= 10000 && value < 10000000) {
  372. value = value / 10000 + "万";
  373. } else if (value >= 10000000) {
  374. value = value / 10000000 + "千万";
  375. }
  376. return value;
  377. }
  378. },
  379. splitLine: {
  380. show: true,
  381. lineStyle: {
  382. color: 'rgba(255,255,255,0.5)',
  383. type: 'dashed', // 虚线
  384. width: 1
  385. }
  386. }
  387. },
  388. {
  389. type: 'value',
  390. name: '',
  391. position: 'right',
  392. axisLabel: {
  393. formatter: '{value}%'
  394. },
  395. splitLine: {
  396. show: false // 不显示右侧网格线
  397. }
  398. }
  399. ],
  400. series: [
  401. {
  402. name: '利润',
  403. type: 'bar',
  404. emphasis: {
  405. focus: 'series'
  406. },
  407. data: []
  408. },
  409. {
  410. name: '利润率',
  411. type: 'line',
  412. yAxisIndex: 1, // 使用右侧坐标轴
  413. smooth: true,
  414. symbol: 'circle',
  415. symbolSize: 8,
  416. lineStyle: {
  417. width: 3
  418. },
  419. itemStyle: {
  420. color: '#fea844'
  421. },
  422. data: []
  423. }
  424. ]
  425. };
  426. var chart2 = document.getElementsByClassName('jlchart');
  427. var myChart2_1 = echarts.init(chart2[0], 'dark');
  428. myChart2_1.setOption(option2);
  429. // myChart2.setOption(option);
  430. const option4_default = {
  431. title: {
  432. },
  433. color: ['rgba(38, 217, 217,0.7)','rgba(78, 139, 229,0.7)',
  434. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  435. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  436. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  437. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  438. 'rgba(242, 179, 82, 0.7)'],
  439. backgroundColor: '#343a40 ',
  440. tooltip: {
  441. trigger: 'axis',
  442. axisPointer: {
  443. type: 'cross',
  444. label: {
  445. backgroundColor: '#6a7985'
  446. }
  447. }
  448. },
  449. legend: {
  450. type: 'scroll',
  451. bottom: '2%',
  452. data: [],
  453. textStyle: {
  454. color: '#fff'
  455. }
  456. },
  457. grid: {
  458. top:'10%',
  459. left: '3%',
  460. right: '4%',
  461. bottom: '15%',
  462. containLabel: true
  463. },
  464. xAxis: [
  465. {
  466. type: 'category',
  467. boundaryGap: false,
  468. data: []
  469. }
  470. ],
  471. yAxis: [
  472. {
  473. type: 'value',
  474. axisLabel : {
  475. formatter: function (value, index) {
  476. if (value < 0) {
  477. let newValue = Math.abs(value);
  478. if (newValue >= 10000 && newValue < 10000000) {
  479. newValue = newValue / 10000 + "万";
  480. } else if (newValue >= 10000000) {
  481. newValue = newValue / 10000000 + "千万";
  482. }
  483. value = '-' + newValue;
  484. }
  485. if (value >= 10000 && value < 10000000) {
  486. value = value / 10000 + "万";
  487. } else if (value >= 10000000) {
  488. value = value / 10000000 + "千万";
  489. }
  490. return value;
  491. }
  492. },
  493. splitLine: {
  494. show: true,
  495. lineStyle: {
  496. color: 'rgba(255,255,255,0.5)',
  497. type: 'dashed', // 虚线
  498. width: 1
  499. }
  500. }
  501. }
  502. ],
  503. dataZoom: [
  504. {
  505. brushSelect: false,
  506. showdetail: false,
  507. show: true,
  508. realtime: true,
  509. dataZoomIndex: 10,
  510. start: 0,
  511. end: 5,
  512. handleSize: 0,
  513. height: 10,
  514. bottom: '10%'
  515. },
  516. ],
  517. series: [],
  518. };
  519. var chart4 = document.getElementsByClassName('jldbchart');
  520. var myChart4_1 = echarts.init(chart4[0], 'dark');
  521. myChart4_1.setOption(option4_default);
  522. function echartsReset() {
  523. myChart1_1.resize();
  524. myChart2_1.resize();
  525. myChart4_1.resize();
  526. }
  527. $(function () {
  528. $('#showFull').click(function () {
  529. const full=document.getElementById("big-data");
  530. launchIntoFullscreen(full);
  531. });
  532. $('#exitFull').click(function () {
  533. exitFullscreen();
  534. })
  535. })
  536. let resizeTimer = null;
  537. $(window).bind('resize', function () {
  538. if (resizeTimer) clearTimeout(resizeTimer);
  539. resizeTimer = setTimeout(function () {
  540. echartsReset();
  541. $(".tableid_").find('th').each(function(i) {
  542. $(this).css('width', $('#tableId').find('th:eq(' + i + ')').innerWidth());
  543. });
  544. }, 500);
  545. })
  546. // 数据全屏
  547. function launchIntoFullscreen(element) {
  548. if(element.requestFullscreen){
  549. element.requestFullscreen();
  550. }
  551. else if(element.mozRequestFullScreen) {
  552. element.mozRequestFullScreen();
  553. }
  554. else if(element.webkitRequestFullscreen) {
  555. element.webkitRequestFullscreen();
  556. }
  557. else if(element.msRequestFullscreen) {
  558. element.msRequestFullscreen();
  559. }
  560. }
  561. function exitFullscreen() {
  562. if(document.exitFullscreen) {
  563. document.exitFullscreen();
  564. } else if(document.mozCancelFullScreen) {
  565. document.mozCancelFullScreen();
  566. } else if(document.webkitExitFullscreen) {
  567. document.webkitExitFullscreen();
  568. }
  569. }
  570. document.addEventListener("fullscreenchange", function (event) {
  571. if (document.fullscreenElement) {
  572. $('#exitfull-div').show();
  573. $('#showFull').hide();
  574. } else {
  575. $('#exitfull-div').hide();
  576. $('#showFull').show();
  577. }
  578. });
  579. </script>
  580. <script>
  581. const originDataCollect = parseInt('<%- ctx.subProject.data_collect %>');
  582. const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
  583. let tenders = '';
  584. // let noticeList = '';
  585. $(function () {
  586. const compareObj = {
  587. curFinalId() {
  588. return this.finalInfo ? this.finalInfo.id : undefined;
  589. },
  590. expand(tree, tag) {
  591. switch (tag) {
  592. case "1":
  593. case "2":
  594. case "3":
  595. case "4":
  596. case "5":
  597. tree.expandByLevel(parseInt(tag));
  598. break;
  599. case "last":
  600. tree.expandByCustom(() => { return true; });
  601. break;
  602. }
  603. },
  604. calcStackedBar(tree) {
  605. const calcField = this.stackedBarField;
  606. const calcFieldColor = { 'gu_tp': '#657798', 'gai_tp': '#EE6666', 'yu_tp': '#74CBED', 'total_price': '#FAC858', 'final_tp': '#62DAAB' };
  607. const calcFieldCaption = { 'gu_tp': '估算', 'gai_tp': '概算', 'yu_tp': '预算', 'total_price': '台账', 'final_tp': '决算' };
  608. const calc = function(node, base){
  609. // const parent = tree.getParent(node);
  610. // if (!parent) {
  611. // base = 0;
  612. // for (const cf of calcField) {
  613. // base = Math.max(node[cf], base);
  614. // }
  615. // }
  616. node.stackedBar = [];
  617. node.stackedBarTips = [];
  618. for (const cf of calcField) {
  619. node.stackedBar.push({color: calcFieldColor[cf], percent: ZhCalc.div(node[cf], base), field: cf});
  620. node.stackedBarTips.push(`${calcFieldCaption[cf]}: ${node[cf] || 0}`);
  621. }
  622. if (node.children) {
  623. for (const child of node.children) {
  624. calc(child, base);
  625. }
  626. }
  627. };
  628. let commonBase = 0;
  629. tree.children.forEach(x => {
  630. for (const cf of calcField) {
  631. commonBase = Math.max(x[cf] || 0, commonBase);
  632. }
  633. });
  634. for (const child of tree.children) {
  635. calc(child, commonBase);
  636. }
  637. },
  638. loadBudgetData(result) {
  639. const compareTree = createNewPathTree('final', {
  640. id: 'id',
  641. pid: 'pid',
  642. order: 'order',
  643. level: 'level',
  644. rootId: -1,
  645. });
  646. const setting = { id: 'tree_id', pid: 'tree_pid', order: 'order', level: 'level', rootId: -1, calcFields: ['total_price'] };
  647. const realTree = createNewPathTree('ledger', setting);
  648. realTree.loadDatas(result.real);
  649. treeCalc.calculateAll(realTree);
  650. compareTree.loadTree(realTree, function (cur, source) {
  651. cur.base = true;
  652. cur.real_dgn_qty1 = ZhCalc.add(cur.real_dgn_qty1, source.dgn_qty1);
  653. cur.real_dgn_qty2 = ZhCalc.add(cur.real_dgn_qty2, source.dgn_qty2);
  654. cur.real_tp = ZhCalc.add(cur.real_tp, source.total_price);
  655. });
  656. const ctrlTree = createNewPathTree('ledger', setting);
  657. ctrlTree.loadDatas(result.ctrl);
  658. treeCalc.calculateAll(ctrlTree);
  659. compareTree.loadTree(ctrlTree, function (cur, source) {
  660. cur.base = true;
  661. cur.ctrl_dgn_qty1 = ZhCalc.add(cur.ctrl_dgn_qty1, source.dgn_qty1);
  662. cur.ctrl_dgn_qty2 = ZhCalc.add(cur.ctrl_dgn_qty2, source.dgn_qty2);
  663. cur.ctrl_tp = ZhCalc.add(cur.ctrl_tp, source.total_price);
  664. });
  665. const zbTree = createNewPathTree('ledger', setting);
  666. zbTree.loadDatas(result.zb);
  667. treeCalc.calculateAll(zbTree);
  668. compareTree.loadTree(zbTree, function (cur, source) {
  669. cur.base = true;
  670. cur.zb_dgn_qty1 = ZhCalc.add(cur.zb_dgn_qty1, source.dgn_qty1);
  671. cur.zb_dgn_qty2 = ZhCalc.add(cur.zb_dgn_qty2, source.dgn_qty2);
  672. cur.zb_tp = ZhCalc.add(cur.zb_tp, source.total_price);
  673. });
  674. const yuTree = createNewPathTree('ledger', setting);
  675. yuTree.loadDatas(result.yu);
  676. treeCalc.calculateAll(yuTree);
  677. compareTree.loadTree(yuTree, function (cur, source) {
  678. cur.base = true;
  679. cur.yu_dgn_qty1 = ZhCalc.add(cur.yu_dgn_qty1, source.dgn_qty1);
  680. cur.yu_dgn_qty2 = ZhCalc.add(cur.yu_dgn_qty2, source.dgn_qty2);
  681. cur.yu_tp = ZhCalc.add(cur.yu_tp, source.total_price);
  682. });
  683. const gaiTree = createNewPathTree('ledger', setting);
  684. gaiTree.loadDatas(result.gai);
  685. treeCalc.calculateAll(gaiTree);
  686. compareTree.loadTree(gaiTree, function (cur, source) {
  687. cur.base = true;
  688. cur.gai_dgn_qty1 = ZhCalc.add(cur.gai_dgn_qty1, source.dgn_qty1);
  689. cur.gai_dgn_qty2 = ZhCalc.add(cur.gai_dgn_qty2, source.dgn_qty2);
  690. cur.gai_tp = ZhCalc.add(cur.gai_tp, source.total_price);
  691. });
  692. const guTree = createNewPathTree('ledger', setting);
  693. guTree.loadDatas(result.gu);
  694. treeCalc.calculateAll(guTree);
  695. compareTree.loadTree(guTree, function (cur, source) {
  696. cur.base = true;
  697. cur.gu_dgn_qty1 = ZhCalc.add(cur.gu_dgn_qty1, source.dgn_qty1);
  698. cur.gu_dgn_qty2 = ZhCalc.add(cur.gu_dgn_qty2, source.dgn_qty2);
  699. cur.gu_tp = ZhCalc.add(cur.gu_tp, source.total_price);
  700. });
  701. compareTree.afterLoad(node => {
  702. node.gu_dgn_price = ZhCalc.div(node.gu_tp, node.gu_dgn_qty1, 2);
  703. node.gu_dgn_qty = node.gu_dgn_qty1
  704. ? (node.gu_dgn_qty2 ? node.gu_dgn_qty1 + '/' + node.gu_dgn_qty2 : node.gu_dgn_qty1)
  705. : (node.gu_dgn_qty2 ? '/' + node.gu_dgn_qty2 : '');
  706. node.gai_dgn_price = ZhCalc.div(node.gai_tp, node.gai_dgn_qty1, 2);
  707. node.gai_dgn_qty = node.gai_dgn_qty1
  708. ? (node.gai_dgn_qty2 ? node.gai_dgn_qty1 + '/' + node.gai_dgn_qty2 : node.gai_dgn_qty1)
  709. : (node.gai_dgn_qty2 ? '/' + node.gai_dgn_qty2 : '');
  710. node.yu_dgn_price = ZhCalc.div(node.yu_tp, node.yu_dgn_qty1, 2);
  711. node.yu_dgn_qty = node.yu_dgn_qty1
  712. ? (node.yu_dgn_qty2 ? node.yu_dgn_qty1 + '/' + node.yu_dgn_qty2 : node.yu_dgn_qty1)
  713. : (node.yu_dgn_qty2 ? '/' + node.yu_dgn_qty2 : '');
  714. node.zb_dgn_price = ZhCalc.div(node.zb_tp, node.zb_dgn_qty1, 2);
  715. node.zb_dgn_qty = node.zb_dgn_qty1
  716. ? (node.zb_dgn_qty2 ? node.zb_dgn_qty1 + '/' + node.zb_dgn_qty2 : node.zb_dgn_qty1)
  717. : (node.zb_dgn_qty2 ? '/' + node.zb_dgn_qty2 : '');
  718. node.ctrl_dgn_price = ZhCalc.div(node.ctrl_tp, node.ctrl_dgn_qty1, 2);
  719. node.ctrl_dgn_qty = node.ctrl_dgn_qty1
  720. ? (node.ctrl_dgn_qty2 ? node.ctrl_dgn_qty1 + '/' + node.ctrl_dgn_qty2 : node.ctrl_dgn_qty1)
  721. : (node.ctrl_dgn_qty2 ? '/' + node.ctrl_dgn_qty2 : '');
  722. node.real_dgn_price = ZhCalc.div(node.real_tp, node.real_dgn_qty1, 2);
  723. node.real_dgn_qty = node.real_dgn_qty1
  724. ? (node.real_dgn_qty2 ? node.real_dgn_qty1 + '/' + node.real_dgn_qty2 : node.real_dgn_qty1)
  725. : (node.real_dgn_qty2 ? '/' + node.real_dgn_qty2 : '');
  726. });
  727. compareTree.resortChildrenByCustom(function (x, y) {
  728. const iCode = compareCode(x.code, y.code);
  729. if (iCode) return iCode;
  730. if (!x.name) return -1;
  731. if (!y.name) return 1;
  732. return x.name.localeCompare(y.name);
  733. });
  734. const expandTag = getLocalCache('revise-compare-level');
  735. if (expandTag) compareObj.expand(compareTree, expandTag);
  736. this.calcStackedBar(compareTree);
  737. // console.log(compareTree);
  738. setPageData(compareTree);
  739. },
  740. loadFinalData(result, msg) {
  741. if (msg) toastr.warning(msg);
  742. this.finalInfo = result.finalInfo;
  743. const finalTree = createNewPathTree('ledger', {
  744. id: 'tree_id',
  745. pid: 'tree_pid',
  746. order: 'order',
  747. level: 'level',
  748. rootId: -1,
  749. });
  750. finalTree.loadDatas(result.final);
  751. const expandTag = getLocalCache('revise-compare-level');
  752. if (expandTag) compareObj.expand(finalTree, expandTag);
  753. this.calcStackedBar(finalTree);
  754. // console.log(finalTree);
  755. setPageData(finalTree);
  756. },
  757. loadCacheData(){
  758. const stackedBarCache = 'gai_tp,total_price,final_tp';
  759. this.setStackedBarField(stackedBarCache.split(','));
  760. },
  761. setStackedBarField(field){
  762. this.stackedBarField = field;
  763. },
  764. };
  765. compareObj.loadCacheData();
  766. function compareCode(str1, str2, symbol = '-') {
  767. if (!str1) {
  768. return 1;
  769. } else if (!str2) {
  770. return -1;
  771. }
  772. function compareSubCode(code1, code2) {
  773. if (numReg.test(code1)) {
  774. if (numReg.test(code2)) {
  775. return parseInt(code1) - parseInt(code2);
  776. } else {
  777. return -1
  778. }
  779. } else {
  780. if (numReg.test(code2)) {
  781. return 1;
  782. } else {
  783. return code1 === code2 ? 0 : (code1 < code2 ? -1 : 1); //code1.localeCompare(code2);
  784. }
  785. }
  786. }
  787. const numReg = /^[0-9]+$/;
  788. const aCodes = str1.split(symbol), bCodes = str2.split(symbol);
  789. for (let i = 0, iLength = Math.min(aCodes.length, bCodes.length); i < iLength; ++i) {
  790. const iCompare = compareSubCode(aCodes[i], bCodes[i]);
  791. if (iCompare !== 0) {
  792. return iCompare;
  793. }
  794. }
  795. return aCodes.length - bCodes.length;
  796. }
  797. postData(`/sp/${spid}/datacollect/load`, {}, function (result, msg) {
  798. if (result.budget) {
  799. if (result.budget.final) {
  800. compareObj.loadFinalData(result.budget, msg);
  801. } else {
  802. compareObj.loadBudgetData(result.budget);
  803. }
  804. }
  805. const cost_tenderList = _.filter(result.tenderList, function (item) {
  806. return item.cost_analysis || item.cost_analsis_num || item.cost_ledger_num || item.cost_book_num || item.stage_num;
  807. })
  808. tenders = cost_tenderList;
  809. if (category && category.length > 0) {
  810. if (category[0] && category[0].value.length > 0) {
  811. for (const [i, fc] of category[0].value.entries()) {
  812. const fcCategory = {cid: fc.cid, value: fc.id};
  813. if (_.findIndex(tenders, function (item) {
  814. return _.findIndex(item.category, fcCategory) !== -1;
  815. }) === -1) {
  816. $('#first-category .select-cate').eq(i + 1).hide();
  817. } else {
  818. $('#first-category .select-cate').eq(i + 1).show();
  819. }
  820. }
  821. }
  822. }
  823. setData(tenders, 0);
  824. });
  825. function setPageData(tree) {
  826. let html = '';
  827. if (tree.children.length > 0) {
  828. // 分析第一层结构,获取各个部分金额非全0的及除了回收金额层
  829. const level1List = _.filter(tree.children, function (item) {
  830. return item.name.indexOf('回收金额') === -1 &&
  831. (item.gu_tp || item.gai_tp || (item.final_tp !== undefined && item.final_tp) || item.yu_tp || (item.ctrl_tp !== undefined && item.ctrl_tp))
  832. });
  833. if (level1List.length > 0) {
  834. for (const t of level1List) {
  835. html += '<tr class="text-center">\n' +
  836. ' <td class="text-left"><span data-toggle="tooltip" data-placement="right" data-original-title="'+ t.name +'">'+ (t.name.length > 15 ? t.name.substring(0, 15) + '...' : t.name) +'</span></td>\n' +
  837. ' <td>'+ (t.gu_tp ? ZhCalc.round(ZhCalc.div(t.gu_tp, 10000), 4) : 0) + '</td>\n' +
  838. ' <td>'+ (t.gai_tp ? ZhCalc.round(ZhCalc.div(t.gai_tp, 10000), 4) : 0) +'</td>\n' +
  839. ' <td>'+ (t.yu_tp ? ZhCalc.round(ZhCalc.div(t.yu_tp, 10000), 4) : 0) +'</td>\n' +
  840. ' <td>'+ (t.ctrl_tp ? ZhCalc.round(ZhCalc.div(t.ctrl_tp, 10000), 4) : 0) +'</td>\n' +
  841. ' <td>'+ (t.final_tp ? ZhCalc.round(ZhCalc.div(t.final_tp, 10000), 4) : 0) +'</td>\n' +
  842. ' <td>' + (t.final_tp && t.ctrl_tp ? ZhCalc.round(ZhCalc.div(t.final_tp, t.ctrl_tp) * 100, 2) : 0) + '</td>\n' +
  843. ' </tr>\n';
  844. }
  845. }
  846. }
  847. // 滚动数据
  848. $('.stage-data').eq(0).html(html);
  849. tableScroll('tableId', '100%', 30, 7);
  850. $('#tableId').css({'margin-top': 0});
  851. }
  852. function setData(tenderList, categoryIndex = 0) {
  853. let total_duty_in_tp = 0;
  854. let total_duty_out_tp = 0;
  855. let total_duty_profit = 0;
  856. let total_in_tp = 0;
  857. let total_out_tp = 0;
  858. let total_profit = 0;
  859. let stage_num = 0;
  860. let cost_ledger_num = 0;
  861. let cost_book_num = 0;
  862. let cost_analysis_num = 0;
  863. let tender_html = '';
  864. const chart_option_name = [];
  865. const chart_option2_data = [];
  866. const chart_option3_data = [];
  867. const chart_option1_data = [];
  868. // let option1_is_tender = false;
  869. const chart_category_data = [];
  870. // if (category && category.length > 0 && category[categoryIndex] && category[categoryIndex].value.length > 0) {
  871. // for (const c of category[categoryIndex].value) {
  872. // chart_category_data.push({
  873. // cid: category[categoryIndex].id,
  874. // value: c.id,
  875. // });
  876. // chart_option1_data.push({
  877. // value: 0,
  878. // name: c.value,
  879. // });
  880. // }
  881. // } else {
  882. // option1_is_tender = true;
  883. // }
  884. const chart_option4_data = [];
  885. for(const t of tenderList) {
  886. const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
  887. if (stage_tp) {
  888. total_in_tp = ZhCalc.add(total_in_tp, stage_tp.in_tp);
  889. total_out_tp = ZhCalc.add(total_out_tp, stage_tp.out_tp);
  890. total_profit = ZhCalc.add(total_profit, stage_tp.profit);
  891. chart_option2_data.push(stage_tp.profit ? ZhCalc.round(ZhCalc.div(stage_tp.profit, 10000), 0) : 0);
  892. chart_option3_data.push(stage_tp.profit_percent ? stage_tp.profit_percent : 0);
  893. chart_option_name.push(t.name);
  894. chart_option1_data.push({ value: stage_tp.profit ? ZhCalc.round(ZhCalc.div(stage_tp.profit, 10000), 0) : 0, name: t.name});
  895. }
  896. const dutyInfo = t.cost_duty ? t.cost_duty : null;
  897. if (dutyInfo) {
  898. const duty_in_tp = dutyInfo.extra_info ? dutyInfo.extra_info.in_tp : 0;
  899. const duty_out_tp = dutyInfo.stage_tp ? dutyInfo.stage_tp.total_price : 0;
  900. total_duty_in_tp = ZhCalc.add(total_duty_in_tp, duty_in_tp);
  901. total_duty_out_tp = ZhCalc.add(total_duty_out_tp, duty_out_tp);
  902. const profit = ZhCalc.sub(duty_in_tp, duty_out_tp);
  903. total_duty_profit = ZhCalc.add(total_duty_profit, profit);
  904. }
  905. stage_num = ZhCalc.add(stage_num, t.stage_num);
  906. cost_ledger_num = ZhCalc.add(cost_ledger_num, t.cost_ledger_num);
  907. cost_book_num = ZhCalc.add(cost_book_num, t.cost_book_num);
  908. cost_analysis_num = ZhCalc.add(cost_analysis_num, t.cost_analysis_num);
  909. // if (option1_is_tender) {
  910. // if(stage_tp.profit)
  911. // } else {
  912. // const sameObject = _.intersectionWith(t.category, chart_category_data, _.isEqual);
  913. // const index = sameObject[0] ? _.findIndex(chart_category_data, { cid: sameObject[0].cid, value: sameObject[0].value }) : -1;
  914. // if (index !== -1) {
  915. // chart_option1_data[index].value = ZhCalc.add(chart_option1_data[index].value, (stage_tp.profit ? stage_tp.profit : 0));
  916. // }
  917. // }
  918. const one_option4_data = {
  919. id: t.id,
  920. name: t.name,
  921. list: [],
  922. };
  923. for (const s of t.month_stage) {
  924. const index = _.findIndex(one_option4_data.list, { yearmonth: s.yearmonth });
  925. if (index === -1) {
  926. one_option4_data.list.push({
  927. yearmonth: s.yearmonth,
  928. tp: s.tp,
  929. end_tp: s.end_tp,
  930. })
  931. } else {
  932. one_option4_data.list[index].tp = ZhCalc.add(one_option4_data.list[index].tp, s.tp);
  933. one_option4_data.list[index].end_tp = ZhCalc.add(one_option4_data.list[index].end_tp, s.end_tp);
  934. }
  935. }
  936. chart_option4_data.push(one_option4_data);
  937. }
  938. // 根据利润率排行并只显示前5位
  939. let index = 1;
  940. const percent_tender_list = _.orderBy(tenderList, (t) => {
  941. const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
  942. return stage_tp && stage_tp.profit_percent ? stage_tp.profit_percent : 0;
  943. }, 'desc').slice(0, 5);
  944. const medalIcons = {
  945. 1: '<i class="fa fa-trophy" style="font-size:18px; color:#F0C040;"></i>',
  946. 2: '<i class="fa fa-trophy" style="font-size:18px; color:#B0B8C1;"></i>',
  947. 3: '<i class="fa fa-trophy" style="font-size:18px; color:#CD7F4A;"></i>',
  948. };
  949. for (const t of percent_tender_list) {
  950. const stage_tp = t.cost_analysis ? t.cost_analysis.stage_tp : null;
  951. if (stage_tp) {
  952. const rankDisplay = medalIcons[index] ?? index;
  953. tender_html += `<tr class="bg-dark">
  954. <td class="text-center py-2">${rankDisplay}</td>
  955. <td class="py-2">${t.name}</td>
  956. <td class="text-center py-2">${stage_tp.profit_percent}%</td>
  957. </tr>`;
  958. index++;
  959. }
  960. }
  961. // console.log(tenderList);
  962. const profit_percent = total_in_tp && total_profit ? ZhCalc.round(ZhCalc.div(total_profit, total_in_tp) * 100, 2) : 0;
  963. const profit_duty_percent = total_duty_in_tp && total_duty_profit ? ZhCalc.round(ZhCalc.div(total_duty_profit, total_duty_in_tp) * 100, 2) : 0;
  964. $('.data_total_profit_percent').text(profit_percent ? profit_percent + '%' : '0%');
  965. $('.data_total_in_tp').text(ZhCalc.round(ZhCalc.div(total_in_tp, 10000), 0));
  966. $('.data_total_out_tp').text(ZhCalc.round(ZhCalc.div(total_out_tp, 10000), 0));
  967. $('.data_total_profit').text(ZhCalc.round(ZhCalc.div(total_profit, 10000), 0));
  968. $('.data_duty_total_profit_percent').text(profit_duty_percent ? profit_duty_percent + '%' : '0%');
  969. $('.data_duty_total_in_tp').text(ZhCalc.round(ZhCalc.div(total_duty_in_tp, 10000), 0));
  970. $('.data_duty_total_out_tp').text(ZhCalc.round(ZhCalc.div(total_duty_out_tp, 10000), 0));
  971. $('.data_duty_total_profit').text(ZhCalc.round(ZhCalc.div(total_duty_profit, 10000), 0));
  972. $('.stage_num').text(stage_num);
  973. $('.cost_ledger_num').text(cost_ledger_num);
  974. $('.cost_analysis_num').text(cost_analysis_num);
  975. $('.cost_book_num').text(cost_book_num);
  976. // 滚动数据
  977. $('.tender-data').eq(0).html(tender_html);
  978. // }
  979. $('[data-toggle="tooltip"]').tooltip();
  980. // 图表数据赋值
  981. const analysis_num = _.filter(tenderList, t => t.cost_analysis).length;
  982. const option2 = myChart2_1.getOption();
  983. option2.dataZoom[0].start = 0;
  984. option2.dataZoom[0].end = computedPosition(analysis_num);
  985. option2.xAxis[0].data = chart_option_name;
  986. option2.series[0].data = chart_option2_data;
  987. option2.series[1].data = chart_option3_data;
  988. if (analysis_num >= 8) {
  989. option2.dataZoom[0].show = true;
  990. } else {
  991. option2.dataZoom[0].show = false;
  992. }
  993. myChart2_1.setOption(option2);
  994. const option4_data = {
  995. yearmonth: [],
  996. series: [],
  997. names: [],
  998. totalMap: {},
  999. }
  1000. console.log(chart_option4_data);
  1001. if (chart_option4_data.length > 0) {
  1002. const monthSet = new Set();
  1003. const namesSet = new Set();
  1004. chart_option4_data.forEach(tender => {
  1005. namesSet.add(tender.name);
  1006. tender.list.forEach(item => {
  1007. monthSet.add(item.yearmonth);
  1008. });
  1009. });
  1010. option4_data.names = [...namesSet];
  1011. option4_data.yearmonth = [...monthSet].sort();
  1012. chart_option4_data.forEach(tender => {
  1013. const data = [];
  1014. let total = 0; // 当前标段累计
  1015. option4_data.yearmonth.forEach(month => {
  1016. const item = tender.list.find(v => v.yearmonth === month);
  1017. // const value = item ? ZhCalc.round(ZhCalc.div(item.tp, 10000), 0) : 0;
  1018. const endtp = item ? ZhCalc.round(ZhCalc.div(item.end_tp, 10000), 0) : 0;
  1019. total = endtp ? endtp : total; // 累计
  1020. data.push(total);
  1021. option4_data.totalMap[month] = ZhCalc.add((option4_data.totalMap[month] || 0), total);
  1022. });
  1023. option4_data.series.push({
  1024. name: tender.name,
  1025. type: 'line',
  1026. smooth: true,
  1027. // itemStyle: {
  1028. // color: option4_default.color[index % option4_default.color.length]
  1029. // },
  1030. // lineStyle: {
  1031. // color: option4_default.color[index % option4_default.color.length]
  1032. // },
  1033. data
  1034. });
  1035. });
  1036. option4_data.names.push('合计');
  1037. option4_data.series.push({
  1038. name: '合计',
  1039. type: 'line',
  1040. smooth: true,
  1041. lineStyle: {
  1042. width: 4,
  1043. color: '#FFD54F'
  1044. },
  1045. itemStyle: {
  1046. color: '#FFD54F'
  1047. },
  1048. symbolSize: 8,
  1049. data: option4_data.yearmonth.map(month => option4_data.totalMap[month] || 0)
  1050. })
  1051. }
  1052. console.log(option4_data);
  1053. const option4 = _.cloneDeep(option4_default);
  1054. option4.dataZoom[0].start = 0;
  1055. option4.dataZoom[0].end = computedPosition(option4_data.yearmonth.length);
  1056. option4.xAxis[0].data = option4_data.yearmonth;
  1057. option4.series = option4_data.series;
  1058. option4.legend.data = option4_data.names;
  1059. if (option4_data.yearmonth.length >= 8) {
  1060. option4.dataZoom[0].show = true;
  1061. } else {
  1062. option4.dataZoom[0].show = false;
  1063. }
  1064. console.log(option4);
  1065. myChart4_1.setOption(option4, true);
  1066. const option1 = myChart1_1.getOption();
  1067. option1.series[0].data = _.filter(chart_option1_data, function (item) {
  1068. return item.value !== 0;
  1069. });
  1070. myChart1_1.setOption(option1);
  1071. // $('#profit_tableId').css({'margin-top': 0});
  1072. }
  1073. // 第一层分类选择
  1074. $("body").on('click', '#first-category .select-cate', function () {
  1075. const id = $(this).data('value');
  1076. $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
  1077. let newTenderList = tenders;
  1078. let categoryIndex = 0;
  1079. if (!id) {
  1080. $('#second-category').hide();
  1081. $('#third-category').hide();
  1082. $('#first-category').children('button').attr('data-cid', '').attr('data-value', '');
  1083. } else {
  1084. // 获取第一层已选类别
  1085. const firstCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
  1086. $('#first-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
  1087. newTenderList = _.filter(tenders, function (item) {
  1088. return _.findIndex(item.category, firstCategory) !== -1;
  1089. })
  1090. categoryIndex = 1;
  1091. if (category[1] && category[1].value.length > 0) {
  1092. $('#second-category').show();
  1093. $('#third-category').hide();
  1094. $('#second-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
  1095. for (const [i,sc] of category[1].value.entries()) {
  1096. const scCategory = { cid: sc.cid, value: sc.id };
  1097. if (_.findIndex(newTenderList, function (item) {
  1098. return _.findIndex(item.category, scCategory) !== -1;}) === -1) {
  1099. $('#second-category .select-cate').eq(i+1).hide();
  1100. } else {
  1101. $('#second-category .select-cate').eq(i+1).show();
  1102. }
  1103. }
  1104. }
  1105. // categoryList.push(firstCategory);
  1106. }
  1107. setData(newTenderList, categoryIndex);
  1108. // 获取新的tenderList及categoryList
  1109. });
  1110. // 第二层分类选择
  1111. $("body").on('click', '#second-category .select-cate', function () {
  1112. const id = $(this).data('value');
  1113. // 获取第一层已选类别
  1114. const first_cid = $('#first-category').children('button').attr('data-cid');
  1115. const first_value = $('#first-category').children('button').attr('data-value');
  1116. const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
  1117. let newTenderList = _.filter(tenders, function (item) {
  1118. return _.findIndex(item.category, firstCategory) !== -1;
  1119. });
  1120. // let categoryList = [firstCategory];
  1121. let categoryIndex = 1;
  1122. $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
  1123. if (!id) {
  1124. $('#third-category').hide();
  1125. } else {
  1126. // 获取第二层已选类别
  1127. const secondCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
  1128. $('#second-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
  1129. newTenderList = _.filter(newTenderList, function (item) {
  1130. return _.findIndex(item.category, secondCategory) !== -1;
  1131. });
  1132. categoryIndex = 2;
  1133. if (category[2] && category[2].value.length > 0) {
  1134. $('#third-category').show();
  1135. $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
  1136. for (const [i,sc] of category[2].value.entries()) {
  1137. const tcCategory = { cid: sc.cid, value: sc.id };
  1138. if (_.findIndex(newTenderList, function (item) {
  1139. return _.findIndex(item.category, tcCategory) !== -1;}) === -1) {
  1140. $('#third-category .select-cate').eq(i+1).hide();
  1141. } else {
  1142. $('#third-category .select-cate').eq(i+1).show();
  1143. }
  1144. }
  1145. }
  1146. // categoryList.push(secondCategory);
  1147. }
  1148. setData(newTenderList, categoryIndex);
  1149. // 获取新的tenderList及categoryList
  1150. });
  1151. // 第三层分类选择(至多三层)
  1152. $("body").on('click', '#third-category .select-cate', function () {
  1153. const id = $(this).data('value');
  1154. // 获取第一层已选类别
  1155. const first_cid = $('#first-category').children('button').attr('data-cid');
  1156. const first_value = $('#first-category').children('button').attr('data-value');
  1157. const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
  1158. let newTenderList = _.filter(tenders, function (item) {
  1159. return _.findIndex(item.category, firstCategory) !== -1;
  1160. });
  1161. // 获取第二层已选类别
  1162. const second_cid = $('#second-category').children('button').attr('data-cid');
  1163. const second_value = $('#second-category').children('button').attr('data-value');
  1164. const secondCategory = { cid: parseInt(second_cid), value: parseInt(second_value) };
  1165. newTenderList = _.filter(newTenderList, function (item) {
  1166. return _.findIndex(item.category, secondCategory) !== -1;
  1167. });
  1168. // let categoryList = [firstCategory, secondCategory];
  1169. let categoryIndex = 2;
  1170. $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
  1171. if (!id) {
  1172. $('#third-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
  1173. } else {
  1174. $('#third-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
  1175. categoryIndex = 3;
  1176. const third_cid = $('#third-category').children('button').attr('data-cid');
  1177. const third_value = $('#third-category').children('button').attr('data-value');
  1178. const thirdCategory = { cid: parseInt(third_cid), value: parseInt(third_value) };
  1179. newTenderList = _.filter(newTenderList, function (item) {
  1180. return _.findIndex(item.category, thirdCategory) !== -1;
  1181. });
  1182. // categoryList.push({ cid: parseInt($(this).data('cid')), value: parseInt($(this).data('value')) });
  1183. }
  1184. setData(newTenderList, categoryIndex);
  1185. // 获取新的tenderList及categoryList
  1186. })
  1187. })
  1188. function formatMoney(s, dot = ',', decimal = 2) {
  1189. if (!s) {
  1190. s = 0;
  1191. return s.toFixed(decimal);
  1192. }
  1193. console.log(parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(decimal) + '');
  1194. // 按decimal位数四舍五入方法
  1195. s = decimal === 0 ? parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(decimal) + '' : (Math.round(parseFloat((s + '').replace(/[^\d\.-]/g, '')) * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal) + '';
  1196. console.log(s, Math.pow(10, decimal));
  1197. if (!decimal) {
  1198. s += '.';
  1199. }
  1200. const l = s.split('.')[0].split('').reverse(),
  1201. r = s.split('.')[1];
  1202. let t = '';
  1203. for (let i = 0; i < l.length; i++) {
  1204. t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? dot : '');
  1205. }
  1206. const num = t.split('').reverse().join('') + (decimal === 0 ? '' : '.' + r);
  1207. return num.replace('-,', '-');
  1208. }
  1209. // 计算显示滚动条长度
  1210. function computedPosition(xArrayLength) {
  1211. if (xArrayLength >= 8) {
  1212. return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
  1213. // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
  1214. } else {
  1215. return 100;
  1216. }
  1217. }
  1218. </script>