index4GY18Y.ejs 61 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389
  1. <link href="/public/css/bootstrap/bootstrap-colorpicker.min.css" rel="stylesheet">
  2. <style>
  3. ::-webkit-scrollbar {
  4. width: 3px;
  5. height: 3px;
  6. }
  7. /* 滚动条有滑块的轨道部分 */
  8. ::-webkit-scrollbar-track-piece {
  9. background-color: transparent;
  10. border-radius: 5px;
  11. }
  12. /* 滚动条滑块(竖向:vertical 横向:horizontal) */
  13. ::-webkit-scrollbar-thumb {
  14. cursor: pointer;
  15. background-color:#2C3034;
  16. border-radius: 5px;
  17. }
  18. /* 滚动条滑块hover */
  19. ::-webkit-scrollbar-thumb:hover {
  20. background-color: #999999;
  21. }
  22. /* 同时有垂直和水平滚动条时交汇的部分 */
  23. ::-webkit-scrollbar-corner {
  24. display: block; /* 修复交汇时出现的白块 */
  25. }
  26. </style>
  27. <div class="panel-content" style="background:#2c3237 !important">
  28. <div class="panel-title fluid border-top-0" style="background:#2c3237 !important">
  29. <div class="title-main d-flex justify-content-between">
  30. <div class="d-inline-block mr-2">
  31. <div class="btn-group" id="first-category">
  32. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
  33. <div class="dropdown-menu" aria-labelledby="zhankai">
  34. <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
  35. <% if (categoryData.length > 0 && categoryData[0].value.length > 0) { %>
  36. <% for (const c of categoryData[0].value) { %>
  37. <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
  38. <% } %>
  39. <% } %>
  40. </div>
  41. </div>
  42. <% if (categoryData[1] && categoryData[1].value.length > 0) { %>
  43. <div class="btn-group" id="second-category" style="display: none">
  44. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-cid="" data-value="" data-toggle="dropdown">全部</button>
  45. <div class="dropdown-menu" aria-labelledby="zhankai">
  46. <a class="dropdown-item select-cate" data-value="" href="javascript:void(0);">全部</a>
  47. <% for (const c of categoryData[1].value) { %>
  48. <a class="dropdown-item select-cate" data-cid="<%- c.cid %>" data-value="<%- c.id %>" href="javascript:void(0);"><%- c.value %></a>
  49. <% } %>
  50. </div>
  51. </div>
  52. <% } %>
  53. </div>
  54. <div>
  55. <a href="javascript:void(0)" title="全屏显示" id="showFull" class="text-white"><i class="fa fa-arrows-alt"></i></a>
  56. <div class="btn-group">
  57. <button type="button" class="btn btn-sm btn-outline-dark text-white dropdown-toggle" data-toggle="dropdown" id="zhankai">决策大屏<span>6</span></button>
  58. <div class="dropdown-menu" aria-labelledby="zhankai">
  59. <% for (const i of ctx.subProject.data_collect_pages) { %>
  60. <a class="dropdown-item" href="/sp/<%- ctx.subProject.id %>/datacollect/index/<%- i %>">决策大屏<%- i %></a>
  61. <% } %>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="content-wrap" id="big-data">
  68. <div style="height: 30px;background-color: #2c3237; display: none" id="exitfull-div">
  69. <div class="title-main d-flex">
  70. <div class="ml-auto">
  71. <div class="dropdown d-flex float-left mt-1 mr-2">
  72. <button id="exitFull" class="btn btn-sm btn-secondary ml-auto">退出全屏</button>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="c-body" style="background:#2c3237 !important">
  78. <div class="flex-content">
  79. <div class="row mx-3" style="height: 63.5vh">
  80. <div class="col-4 px-0 pb-1 height-100">
  81. <div class="height-100 pr-1">
  82. <div class="center-chart pb-1">
  83. <div class="card height-100 bg-dark">
  84. <div class="gcsrmx_chart" style="height: 100%; width: 100%;"></div>
  85. </div>
  86. </div>
  87. <div class="center-chart pt-1">
  88. <div class="card height-100 bg-dark">
  89. <div class="gccb" style="height: 100%; width: 100%;">
  90. <h6 class="bg-dark text-center text-white m-0 py-3">工程成本管理汇总</h6>
  91. <div class="tablebox" style="overflow: auto;">
  92. <table>
  93. <thead>
  94. <tr style="text-align: center">
  95. <th></th>
  96. <th>已完成</th>
  97. <th>应支付</th>
  98. <th>已支付</th>
  99. <th>待支付</th>
  100. </tr>
  101. </thead>
  102. <tbody class="stage-data">
  103. </tbody>
  104. </table>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="col-4 px-0 pb-1 height-100">
  112. <div class="height-100 px-1">
  113. <div class="center-chart pb-1">
  114. <div class="card height-100 bg-dark">
  115. <div class="gcsrqk_chart" style="height: 100%; width: 100%;"></div>
  116. </div>
  117. </div>
  118. <div class="center-chart pt-1 text-center text-white">
  119. <div class="height-100 row">
  120. <div class="col-6 pr-1">
  121. <div class="center-chart pb-1">
  122. <div class="card height-100 bg-dark">
  123. <div class="height-100" style="display: grid;place-items: center;">
  124. <div style="line-height: 3;">
  125. <div style="font-size: 1.2rem" class="gcsr_price"></div>
  126. <div style="font-size: .9rem;">
  127. <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程收入</span>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="center-chart pt-1">
  134. <div class="card height-100 bg-dark">
  135. <div class="height-100" style="display: grid;place-items: center;">
  136. <div style="line-height: 3;">
  137. <div style="font-size: 1.2rem" class="gclr_price"></div>
  138. <div style="font-size: .9rem;">
  139. <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程利润</span>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="col-6 pl-1">
  147. <div class="center-chart pb-1">
  148. <div class="card height-100 bg-dark">
  149. <div class="height-100" style="display: grid;place-items: center;">
  150. <div style="line-height: 3;">
  151. <div style="font-size: 1.2rem" class="gccb_price"></div>
  152. <div style="font-size: .9rem;">
  153. <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程成本</span>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="center-chart pt-1">
  160. <div class="card height-100 bg-dark">
  161. <div class="height-100" style="display: grid;place-items: center;">
  162. <div style="line-height: 3;">
  163. <div style="font-size: 1.2rem" class="gclrl_num"></div>
  164. <div style="font-size: .9rem;">
  165. <span style="background-color: #42474c;border-radius: 1rem;padding: .25rem .75rem">工程利润率</span>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="col-4 px-0 pb-1 height-100">
  177. <div class="height-100 pl-1">
  178. <div class="center-chart pb-1">
  179. <div class="card height-100 bg-dark">
  180. <div class="yingsf_chart" style="height: 100%; width: 100%;"></div>
  181. </div>
  182. </div>
  183. <div class="center-chart pt-1">
  184. <div class="card height-100 bg-dark">
  185. <div class="yisf_chart" style="height: 100%; width: 100%;"></div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="row mx-3" style="height: 32vh">
  192. <div class="col-3 px-0 pt-1 height-100">
  193. <div class="height-100" style="padding-right: .375rem !important;">
  194. <% if (dpCategory.length > 0 && dpCategory[0]) { %>
  195. <div class="card bg-dark height-100">
  196. <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
  197. </div>
  198. <% } %>
  199. </div>
  200. </div>
  201. <div class="col-3 px-0 pt-1 height-100">
  202. <div class="height-100 pr-1" style="padding-left: .125rem !important;">
  203. <% if (dpCategory.length > 1 && dpCategory[1]) { %>
  204. <div class="card bg-dark height-100">
  205. <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
  206. </div>
  207. <% } %>
  208. </div>
  209. </div>
  210. <div class="col-3 px-0 pt-1 height-100">
  211. <div class="height-100 pl-1" style="padding-right: .125rem !important;">
  212. <% if (dpCategory.length > 2 && dpCategory[2]) { %>
  213. <div class="card bg-dark height-100">
  214. <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
  215. </div>
  216. <% } %>
  217. </div>
  218. </div>
  219. <div class="col-3 px-0 pt-1 height-100">
  220. <div class="height-100" style="padding-left: .375rem !important;">
  221. <% if (dpCategory.length > 3 && dpCategory[3]) { %>
  222. <div class="card bg-dark height-100">
  223. <div class="dpgl_chart" style="height: 100%; width: 100%;"></div>
  224. </div>
  225. <% } %>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <!--<script src="/public/js/datacollect_scroll.js"></script>-->
  234. <script type="text/javascript"> autoFlashHeight();</script>
  235. <script type="text/javascript">
  236. const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
  237. const daping06Set = JSON.parse(unescape('<%- escape(JSON.stringify(daping06Set)) %>'));
  238. const dpCategory = JSON.parse(unescape('<%- escape(JSON.stringify(dpCategory)) %>'));
  239. const gcsrmx_option = {
  240. title: {
  241. text: '工程收入明细',
  242. left: 'center',
  243. top:'5%'
  244. },
  245. color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
  246. 'rgba(59,255,208,1)','rgba(108, 78, 229,0.7)',
  247. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  248. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  249. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  250. 'rgba(242, 179, 82, 0.7)'],
  251. backgroundColor: '#343a40 ',
  252. tooltip: {
  253. trigger: 'axis',
  254. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  255. type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
  256. },
  257. position: function (pos, params, dom, rect, size) {
  258. return {top: pos[1], left: pos[0]};
  259. }
  260. },
  261. dataZoom: [
  262. {
  263. brushSelect:false,
  264. // zoomLock: false,
  265. type: 'slider',
  266. show: true,
  267. realtime: true,
  268. showdetail: false,
  269. showDataShadow: false,
  270. // dataZoomIndex: 10,
  271. start: 0,
  272. end: 8,
  273. handleSize: 0,
  274. height: 10,
  275. bottom: '10%',
  276. },
  277. ],
  278. legend: {
  279. data: ['已完成', '应收入', '已收入'],
  280. top:'17%'
  281. },
  282. grid: {
  283. top:'25%',
  284. left: '3%',
  285. right: '4%',
  286. bottom: '15%',
  287. containLabel: true
  288. },
  289. xAxis: [
  290. {
  291. type: 'category',
  292. data: [],
  293. axisLabel: {
  294. show: true,
  295. interval: 0,
  296. textStyle: {
  297. color: "#fff",
  298. fontSize: 12
  299. },
  300. formatter: function(value) {
  301. var res = value;
  302. if(res.length > 5) {
  303. res = res.substring(0, 4) + "..";
  304. }
  305. return res;
  306. },
  307. rich: {
  308. ellipsis: {
  309. width: 100, // 控制显示宽度
  310. overflow: 'break',
  311. }
  312. }
  313. },
  314. }
  315. ],
  316. yAxis: [
  317. {
  318. type: 'value',
  319. name:'金额',
  320. position: 'left',
  321. axisLabel : {
  322. formatter: function (value, index) {
  323. if (value < 0) {
  324. let newValue = Math.abs(value);
  325. if (newValue >= 10000 && newValue < 10000000) {
  326. newValue = newValue / 10000 + "万";
  327. } else if (newValue >= 10000000) {
  328. newValue = newValue / 10000000 + "千万";
  329. }
  330. value = '-' + newValue;
  331. }
  332. if (value >= 10000 && value < 10000000) {
  333. value = value / 10000 + "万";
  334. } else if (value >= 10000000) {
  335. value = value / 10000000 + "千万";
  336. }
  337. return value;
  338. }
  339. },
  340. splitArea : {show : true}
  341. },
  342. ],
  343. series: [
  344. {
  345. name: '已完成',
  346. type: 'bar',
  347. emphasis: {
  348. focus: 'series'
  349. },
  350. data: []
  351. },
  352. {
  353. name: '应收入',
  354. type: 'bar',
  355. emphasis: {
  356. focus: 'series'
  357. },
  358. data: []
  359. },
  360. {
  361. name: '已收入',
  362. type: 'bar',
  363. emphasis: {
  364. focus: 'series'
  365. },
  366. data: []
  367. }
  368. ]
  369. };
  370. const gcsrmx_chart = document.getElementsByClassName('gcsrmx_chart');
  371. const gcsrmxChart = echarts.init(gcsrmx_chart[0], 'dark');
  372. gcsrmxChart.setOption(gcsrmx_option);
  373. const gcsrqk_option = {
  374. title: {
  375. text: '工程收入情况',
  376. left: 'center',
  377. top:'5%'
  378. },
  379. color: ['rgba(0, 157, 255, 1)','rgba(78, 139, 229,1)',
  380. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  381. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  382. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  383. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  384. 'rgba(242, 179, 82, 0.7)'],
  385. backgroundColor: '#343a40',
  386. tooltip: {
  387. trigger: 'axis',
  388. axisPointer: { // Use axis to trigger tooltip
  389. type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
  390. }
  391. },
  392. grid: {
  393. left: '10%',
  394. right: '10%',
  395. bottom: '3%',
  396. containLabel: true
  397. },
  398. xAxis: {
  399. type: 'value',
  400. name:'金额',
  401. position: 'bottom',
  402. axisLabel : {
  403. formatter: function (value, index) {
  404. if (value < 0) {
  405. let newValue = Math.abs(value);
  406. if (newValue >= 10000 && newValue < 10000000) {
  407. newValue = newValue / 10000 + "万";
  408. } else if (newValue >= 10000000) {
  409. newValue = newValue / 10000000 + "千万";
  410. }
  411. value = '-' + newValue;
  412. }
  413. if (value >= 10000 && value < 10000000) {
  414. value = value / 10000 + "万";
  415. } else if (value >= 10000000) {
  416. value = value / 10000000 + "千万";
  417. }
  418. return value;
  419. }
  420. },
  421. splitArea : {show : true}
  422. },
  423. yAxis: {
  424. type: 'category',
  425. data: ['待收入', '已收入', '应收入', '已完成', '合同'],
  426. axisLabel: {
  427. show: true,
  428. interval: 0,
  429. formatter: function(value) {
  430. var res = value;
  431. if(res.length > 10) {
  432. res = res.substring(0, 10) + "..";
  433. }
  434. return res;
  435. }
  436. },
  437. margin: 10,
  438. },
  439. // dataZoom: [
  440. // {
  441. // brushSelect:false,
  442. // start: 0,
  443. // end: 10,
  444. // type: 'slider',
  445. // show: true,
  446. // handleSize: 0,
  447. // realtime: true,
  448. // showDetail: false,
  449. // // filterMode: 'empty',
  450. // yAxisIndex: [0,1],
  451. // width: 10,
  452. // height: '80%',
  453. // right: '5%',
  454. // bottom:'2%'
  455. // },
  456. // ],
  457. series: [
  458. {
  459. name: '情况',
  460. type: 'bar',
  461. stack: 'total',
  462. label: {
  463. show: true,
  464. // position: 'insideLeft',
  465. align: 'left'
  466. },
  467. emphasis: {
  468. focus: 'series'
  469. },
  470. data: [],
  471. }
  472. ]
  473. };
  474. const gcsrqk_chart = document.getElementsByClassName('gcsrqk_chart');
  475. const gcsrqkChart = echarts.init(gcsrqk_chart[0], 'dark');
  476. gcsrqkChart.setOption(gcsrqk_option);
  477. const yingsf_option = {
  478. title: {
  479. text: '应收与应付对比',
  480. left: 'center',
  481. top:'5%'
  482. },
  483. color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
  484. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  485. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  486. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  487. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  488. 'rgba(242, 179, 82, 0.7)'],
  489. backgroundColor: '#343a40 ',
  490. tooltip: {
  491. trigger: 'axis',
  492. axisPointer: {
  493. type: 'cross',
  494. label: {
  495. backgroundColor: '#6a7985'
  496. }
  497. }
  498. },
  499. legend: {
  500. data: ['工程应收', '工程应付'],
  501. top:'15%'
  502. },
  503. grid: {
  504. top:'25%',
  505. left: '3%',
  506. right: '4%',
  507. bottom: '15%',
  508. containLabel: true
  509. },
  510. xAxis: [
  511. {
  512. type: 'category',
  513. boundaryGap: false,
  514. data: []
  515. }
  516. ],
  517. yAxis: [
  518. {
  519. type: 'value',
  520. axisLabel : {
  521. formatter: function (value, index) {
  522. if (value < 0) {
  523. let newValue = Math.abs(value);
  524. if (newValue >= 10000 && newValue < 10000000) {
  525. newValue = newValue / 10000 + "万";
  526. } else if (newValue >= 10000000) {
  527. newValue = newValue / 10000000 + "千万";
  528. }
  529. value = '-' + newValue;
  530. }
  531. if (value >= 10000 && value < 10000000) {
  532. value = value / 10000 + "万";
  533. } else if (value >= 10000000) {
  534. value = value / 10000000 + "千万";
  535. }
  536. return value;
  537. }
  538. },
  539. }
  540. ],
  541. dataZoom: [
  542. {
  543. brushSelect: false,
  544. showdetail: false,
  545. show: true,
  546. realtime: true,
  547. dataZoomIndex: 10,
  548. start: 0,
  549. end: 8,
  550. handleSize: 0,
  551. height: 10,
  552. bottom: '10%'
  553. },
  554. ],
  555. series: [
  556. {
  557. name: '工程应收',
  558. type: 'line',
  559. // stack: '总量',
  560. // areaStyle: {},
  561. emphasis: {
  562. focus: 'series'
  563. },
  564. data: []
  565. },
  566. {
  567. name: '工程应付',
  568. type: 'line',
  569. // stack: '总量',
  570. // areaStyle: {},
  571. emphasis: {
  572. focus: 'series'
  573. },
  574. data: []
  575. }
  576. ]
  577. };
  578. const yingsf_chart = document.getElementsByClassName('yingsf_chart');
  579. const yingsfChart = echarts.init(yingsf_chart[0], 'dark');
  580. yingsfChart.setOption(yingsf_option);
  581. const yisf_option = {
  582. title: {
  583. text: '已收与已付对比',
  584. left: 'center',
  585. top:'5%'
  586. },
  587. color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
  588. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  589. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  590. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  591. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  592. 'rgba(242, 179, 82, 0.7)'],
  593. backgroundColor: '#343a40 ',
  594. tooltip: {
  595. trigger: 'axis',
  596. axisPointer: {
  597. type: 'cross',
  598. label: {
  599. backgroundColor: '#6a7985'
  600. }
  601. }
  602. },
  603. legend: {
  604. data: ['工程已收', '工程已付'],
  605. top:'15%'
  606. },
  607. grid: {
  608. top:'25%',
  609. left: '3%',
  610. right: '4%',
  611. bottom: '15%',
  612. containLabel: true
  613. },
  614. xAxis: [
  615. {
  616. type: 'category',
  617. boundaryGap: false,
  618. data: []
  619. }
  620. ],
  621. yAxis: [
  622. {
  623. type: 'value',
  624. axisLabel : {
  625. formatter: function (value, index) {
  626. if (value < 0) {
  627. let newValue = Math.abs(value);
  628. if (newValue >= 10000 && newValue < 10000000) {
  629. newValue = newValue / 10000 + "万";
  630. } else if (newValue >= 10000000) {
  631. newValue = newValue / 10000000 + "千万";
  632. }
  633. value = '-' + newValue;
  634. }
  635. if (value >= 10000 && value < 10000000) {
  636. value = value / 10000 + "万";
  637. } else if (value >= 10000000) {
  638. value = value / 10000000 + "千万";
  639. }
  640. return value;
  641. }
  642. },
  643. }
  644. ],
  645. dataZoom: [
  646. {
  647. brushSelect: false,
  648. showdetail: false,
  649. show: true,
  650. realtime: true,
  651. dataZoomIndex: 10,
  652. start: 0,
  653. end: 8,
  654. handleSize: 0,
  655. height: 10,
  656. bottom: '10%'
  657. },
  658. ],
  659. series: [
  660. {
  661. name: '工程已收',
  662. type: 'line',
  663. // stack: '总量',
  664. // areaStyle: {},
  665. emphasis: {
  666. focus: 'series'
  667. },
  668. data: []
  669. },
  670. {
  671. name: '工程已付',
  672. type: 'line',
  673. // stack: '总量',
  674. // areaStyle: {},
  675. emphasis: {
  676. focus: 'series'
  677. },
  678. data: []
  679. }
  680. ]
  681. };
  682. const yisf_chart = document.getElementsByClassName('yisf_chart');
  683. const yisfChart = echarts.init(yisf_chart[0], 'dark');
  684. yisfChart.setOption(yisf_option);
  685. const dpglChartOption = {
  686. title: {
  687. text: '管理',
  688. left: 'center',
  689. top:'5%'
  690. },
  691. color: ['rgba(0, 157, 255,1)','rgba(34,228,255,1)',
  692. 'rgba(78, 229, 139,0.7)','rgba(108, 78, 229,0.7)',
  693. 'rgba(58,207,221,0.7)','rgba(164, 229, 78,0.7)',
  694. 'rgba(199, 78, 229,0.7)', 'rgba(229, 92, 174, 0.7)',
  695. 'rgba(229, 214, 78, 0.7)', 'rgba(241, 87, 96, 0.7)',
  696. 'rgba(242, 179, 82, 0.7)'],
  697. backgroundColor: '#343a40 ',
  698. tooltip: {
  699. trigger: 'axis',
  700. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  701. type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  702. },
  703. },
  704. dataZoom: [
  705. {
  706. brushSelect:false,
  707. // zoomLock: false,
  708. type: 'slider',
  709. show: true,
  710. realtime: true,
  711. showdetail: false,
  712. showDataShadow: false,
  713. // dataZoomIndex: 10,
  714. start: 0,
  715. end: 1,
  716. handleSize: 0,
  717. height: 10,
  718. bottom: '10%',
  719. zoomLock: true,
  720. },
  721. ],
  722. legend: {
  723. data: ['已完成', '已支付'],
  724. top:'17%'
  725. },
  726. grid: {
  727. top:'25%',
  728. left: '3%',
  729. right: '4%',
  730. bottom: '15%',
  731. containLabel: true
  732. },
  733. xAxis: [
  734. {
  735. type: 'category',
  736. data: [],
  737. axisLabel: {
  738. show: true,
  739. interval: 0,
  740. textStyle: {
  741. color: "#fff",
  742. fontSize: 12
  743. },
  744. formatter: function(value) {
  745. var res = value;
  746. if(res.length > 4) {
  747. res = res.substring(0, 4) + "..";
  748. }
  749. return res;
  750. },
  751. rich: {
  752. ellipsis: {
  753. width: 100, // 控制显示宽度
  754. overflow: 'break',
  755. }
  756. }
  757. }
  758. }
  759. ],
  760. yAxis: [
  761. {
  762. type: 'value',
  763. name:'金额',
  764. position: 'left',
  765. axisLabel : {
  766. formatter: function (value, index) {
  767. if (value < 0) {
  768. let newValue = Math.abs(value);
  769. if (newValue >= 10000 && newValue < 10000000) {
  770. newValue = newValue / 10000 + "万";
  771. } else if (newValue >= 10000000) {
  772. newValue = newValue / 10000000 + "千万";
  773. }
  774. value = '-' + newValue;
  775. }
  776. if (value >= 10000 && value < 10000000) {
  777. value = value / 10000 + "万";
  778. } else if (value >= 10000000) {
  779. value = value / 10000000 + "千万";
  780. }
  781. return value;
  782. }
  783. },
  784. splitArea : {show : true}
  785. },
  786. ],
  787. series: [
  788. {
  789. name: '已完成',
  790. type: 'bar',
  791. emphasis: {
  792. focus: 'series'
  793. },
  794. data: [],
  795. barMaxWidth: 30
  796. },
  797. {
  798. name: '已支付',
  799. type: 'bar',
  800. stack: '计量',
  801. emphasis: {
  802. focus: 'series'
  803. },
  804. data: [],
  805. barMaxWidth: 30
  806. }
  807. ]
  808. };
  809. const dpgl_chart = document.getElementsByClassName('dpgl_chart');
  810. const dpgl_charts = [];
  811. for (const d in dpCategory) {
  812. dpgl_charts[d] = echarts.init(dpgl_chart[d], 'dark');
  813. const option = _.cloneDeep(dpglChartOption);
  814. option.title.text = dpCategory[d].value;
  815. if (d == 0) {
  816. option.tooltip.position = function (pos, params, dom, rect, size) {
  817. return {top: pos[1], left: pos[0]};
  818. }
  819. }
  820. dpgl_charts[d].setOption(option);
  821. }
  822. let tenders = '';
  823. $(function () {
  824. $('#showFull').click(function () {
  825. const full=document.getElementById("big-data");
  826. launchIntoFullscreen(full);
  827. });
  828. $('#exitFull').click(function () {
  829. exitFullscreen();
  830. })
  831. // 数据全屏
  832. function launchIntoFullscreen(element) {
  833. if(element.requestFullscreen){
  834. element.requestFullscreen();
  835. }
  836. else if(element.mozRequestFullScreen) {
  837. element.mozRequestFullScreen();
  838. }
  839. else if(element.webkitRequestFullscreen) {
  840. element.webkitRequestFullscreen();
  841. }
  842. else if(element.msRequestFullscreen) {
  843. element.msRequestFullscreen();
  844. }
  845. }
  846. function exitFullscreen() {
  847. if(document.exitFullscreen) {
  848. document.exitFullscreen();
  849. } else if(document.mozCancelFullScreen) {
  850. document.mozCancelFullScreen();
  851. } else if(document.webkitExitFullscreen) {
  852. document.webkitExitFullscreen();
  853. }
  854. }
  855. document.addEventListener("fullscreenchange", function (event) {
  856. if (document.fullscreenElement) {
  857. $('#exitfull-div').show();
  858. $('#showFull').hide();
  859. } else {
  860. $('#exitfull-div').hide();
  861. $('#showFull').show();
  862. }
  863. });
  864. postData(`/sp/${spid}/datacollect/load`, {}, function (result) {
  865. tenders = result.tenderList;
  866. if (category && category.length > 0) {
  867. if (category[0] && category[0].value.length > 0) {
  868. for (const [i, fc] of category[0].value.entries()) {
  869. const fcCategory = {cid: fc.cid, value: fc.id};
  870. if (_.findIndex(tenders, function (item) {
  871. return _.findIndex(item.category, fcCategory) !== -1;
  872. }) === -1) {
  873. $('#first-category .select-cate').eq(i + 1).hide();
  874. } else {
  875. $('#first-category .select-cate').eq(i + 1).show();
  876. }
  877. }
  878. }
  879. }
  880. for (const t of tenders) {
  881. calculateTender(t);
  882. }
  883. console.log(tenders);
  884. setData(tenders);
  885. });
  886. function calculateTender(tender) {
  887. if (tender.stage_tp) {
  888. tender.gather_tp = ZhCalc.sum([tender.stage_tp.contract_tp, tender.stage_tp.qc_tp, tender.stage_tp.pc_tp]);
  889. tender.end_contract_tp = ZhCalc.sum([tender.stage_tp.pre_contract_tp, tender.stage_tp.contract_tp, tender.stage_tp.contract_pc_tp]);
  890. tender.end_qc_tp = ZhCalc.sum([tender.stage_tp.pre_qc_tp, tender.stage_tp.qc_tp, tender.stage_tp.qc_pc_tp]);
  891. tender.end_gather_tp = ZhCalc.add(tender.end_contract_tp, tender.end_qc_tp);
  892. tender.pre_gather_tp = ZhCalc.add(tender.stage_tp.pre_contract_tp, tender.stage_tp.pre_qc_tp);
  893. tender.yf_tp = ZhCalc.add(tender.stage_tp.yf_tp);
  894. tender.end_yf_tp = ZhCalc.add(tender.stage_tp.pre_yf_tp, tender.yf_tp);
  895. tender.sf_tp = ZhCalc.add(tender.stage_tp.sf_tp);
  896. tender.end_sf_tp = ZhCalc.add(tender.stage_tp.pre_sf_tp, tender.sf_tp);
  897. }
  898. }
  899. function setData(tenderList, categoryIndex = 0) {
  900. let gcsr_price = 0;
  901. let gccb_price = 0;
  902. let gclr_price = 0;
  903. let gclrl_num = 0;
  904. // 区分工程收入和工程成本
  905. const sr_tenders = _.filter(tenderList, function (item) {
  906. return _.findIndex(item.category, {cid: daping06Set.sr, value: daping06Set.sr_value}) !== -1;
  907. });
  908. const cb_tenders = _.filter(tenderList, function (item) {
  909. return _.findIndex(item.category, {cid: daping06Set.cb, value: daping06Set.cb_value}) !== -1;
  910. });
  911. const sr_chart_option_data = {
  912. contract_price: 0,
  913. end_gather_tp: 0,
  914. end_yf_tp: 0,
  915. end_sf_tp: 0,
  916. end_ds_tp: 0,
  917. };
  918. const srmx_chart_option_name = [];
  919. const srmx_chart_option_data = {
  920. end_gather_tp: [],
  921. end_yf_tp:[],
  922. end_sf_tp:[],
  923. };
  924. const yingsf_option_data = [];
  925. const yisf_option_data = [];
  926. for (const sr of sr_tenders) {
  927. sr_chart_option_data.contract_price = ZhCalc.add(sr_chart_option_data.contract_price, sr.contract_price);
  928. sr_chart_option_data.end_gather_tp = ZhCalc.add(sr_chart_option_data.end_gather_tp, sr.end_gather_tp);
  929. sr_chart_option_data.end_yf_tp = ZhCalc.add(sr_chart_option_data.end_yf_tp, sr.end_yf_tp);
  930. sr_chart_option_data.end_sf_tp = ZhCalc.add(sr_chart_option_data.end_sf_tp, sr.end_sf_tp);
  931. srmx_chart_option_name.push(sr.name);
  932. srmx_chart_option_data.end_gather_tp.push(sr.end_gather_tp ? sr.end_gather_tp : 0);
  933. srmx_chart_option_data.end_yf_tp.push(sr.end_yf_tp ? sr.end_yf_tp : 0);
  934. srmx_chart_option_data.end_sf_tp.push(sr.end_sf_tp ? sr.end_sf_tp : 0);
  935. for (const s of sr.month_stage) {
  936. const index = _.findIndex(yingsf_option_data, { yearmonth: s.yearmonth });
  937. const yiIndex = _.findIndex(yisf_option_data, { yearmonth: s.yearmonth });
  938. if (index === -1) {
  939. yingsf_option_data.push({
  940. yearmonth: s.yearmonth,
  941. ys_tp: s.end_yf_tp,
  942. yf_tp: 0,
  943. had_ys: true,
  944. had_yf: false,
  945. });
  946. } else {
  947. yingsf_option_data[index].had_ys = true;
  948. yingsf_option_data[index].ys_tp = ZhCalc.add(yingsf_option_data[index].ys_tp, s.end_yf_tp);
  949. }
  950. if (yiIndex === -1) {
  951. yisf_option_data.push({
  952. yearmonth: s.yearmonth,
  953. ys_tp: s.end_sf_tp,
  954. yf_tp: 0,
  955. had_ys: true,
  956. had_yf: false,
  957. });
  958. } else {
  959. yisf_option_data[yiIndex].had_ys = true;
  960. yisf_option_data[yiIndex].ys_tp = ZhCalc.add(yisf_option_data[yiIndex].ys_tp, s.end_sf_tp);
  961. }
  962. }
  963. }
  964. sr_chart_option_data.end_ds_tp = ZhCalc.sub(sr_chart_option_data.end_yf_tp, sr_chart_option_data.end_sf_tp);
  965. // 工程收入明细
  966. const gcsrmx_chart_option = gcsrmxChart.getOption();
  967. gcsrmx_chart_option.dataZoom[0].start = 0;
  968. gcsrmx_chart_option.dataZoom[0].end = computedPosition(sr_tenders.length, 6);
  969. gcsrmx_chart_option.xAxis[0].data = srmx_chart_option_name;
  970. gcsrmx_chart_option.series[0].data = srmx_chart_option_data.end_gather_tp;
  971. gcsrmx_chart_option.series[1].data = srmx_chart_option_data.end_yf_tp;
  972. gcsrmx_chart_option.series[2].data = srmx_chart_option_data.end_sf_tp;
  973. if (sr_tenders.length >= 6) {
  974. gcsrmx_chart_option.dataZoom[0].show = true;
  975. } else {
  976. gcsrmx_chart_option.dataZoom[0].show = false;
  977. }
  978. gcsrmxChart.setOption(gcsrmx_chart_option);
  979. // 工程收入情况
  980. const gcsrqk_chart_option = gcsrqkChart.getOption();
  981. // gcsrqk_chart_option.dataZoom[0].start = 0;
  982. // gcsrqk_chart_option.dataZoom[0].end = computedPosition(sr_tenders.length);
  983. gcsrqk_chart_option.series[0].data = [sr_chart_option_data.end_ds_tp, sr_chart_option_data.end_sf_tp, sr_chart_option_data.end_yf_tp, sr_chart_option_data.end_gather_tp, sr_chart_option_data.contract_price];
  984. // if (sr_tenders.length >= 8) {
  985. // gcsrqk_chart_option.dataZoom[0].show = true;
  986. // } else {
  987. // gcsrqk_chart_option.dataZoom[0].show = false;
  988. // }
  989. gcsrqkChart.setOption(gcsrqk_chart_option);
  990. const cb_chart_option_data = {
  991. // end_contract_tp: 0,
  992. end_gather_tp: 0,
  993. end_yf_tp: 0,
  994. end_sf_tp: 0,
  995. end_ds_tp: 0,
  996. };
  997. const cb_chart_option_name = [];
  998. for (const cb of cb_tenders) {
  999. cb_chart_option_name.push(cb.name);
  1000. // cb_chart_option_data.end_contract_tp = ZhCalc.add(cb_chart_option_data.end_contract_tp, cb.end_contract_tp);
  1001. cb_chart_option_data.end_gather_tp = ZhCalc.add(cb_chart_option_data.end_gather_tp, cb.end_gather_tp);
  1002. cb_chart_option_data.end_yf_tp = ZhCalc.add(cb_chart_option_data.end_yf_tp, cb.end_yf_tp);
  1003. cb_chart_option_data.end_sf_tp = ZhCalc.add(cb_chart_option_data.end_sf_tp, cb.end_sf_tp);
  1004. for (const s of cb.month_stage) {
  1005. const index = _.findIndex(yingsf_option_data, { yearmonth: s.yearmonth });
  1006. const yiIndex = _.findIndex(yisf_option_data, { yearmonth: s.yearmonth });
  1007. if (index === -1) {
  1008. yingsf_option_data.push({
  1009. yearmonth: s.yearmonth,
  1010. ys_tp: 0,
  1011. yf_tp: s.end_yf_tp,
  1012. had_ys: false,
  1013. had_yf: true,
  1014. });
  1015. } else {
  1016. yingsf_option_data[index].had_yf = true;
  1017. yingsf_option_data[index].yf_tp = ZhCalc.add(yingsf_option_data[index].yf_tp, s.end_yf_tp);
  1018. }
  1019. if (yiIndex === -1) {
  1020. yisf_option_data.push({
  1021. yearmonth: s.yearmonth,
  1022. ys_tp: 0,
  1023. yf_tp: s.end_sf_tp,
  1024. had_ys: false,
  1025. had_yf: true,
  1026. });
  1027. } else {
  1028. yisf_option_data[index].had_yf = true;
  1029. yisf_option_data[yiIndex].yf_tp = ZhCalc.add(yisf_option_data[yiIndex].yf_tp, s.end_sf_tp);
  1030. }
  1031. }
  1032. }
  1033. cb_chart_option_data.end_ds_tp = ZhCalc.sub(cb_chart_option_data.end_yf_tp, cb_chart_option_data.end_sf_tp);
  1034. // 中间表格数值
  1035. gcsr_price = sr_chart_option_data.end_yf_tp;
  1036. $('.gcsr_price').text(formatNum(gcsr_price, '#,##0.######'));
  1037. gccb_price = cb_chart_option_data.end_yf_tp;
  1038. $('.gccb_price').text(formatNum(gccb_price, '#,##0.######'));
  1039. gclr_price = ZhCalc.sub(gcsr_price, gccb_price);
  1040. $('.gclr_price').text(formatNum(gclr_price, '#,##0.######'));
  1041. gclrl_num = ZhCalc.round(ZhCalc.div(gclr_price, gccb_price)*100, 2);
  1042. $('.gclrl_num').text((gclrl_num ? gclrl_num : 0) + '%');
  1043. // 应收应付及已收已付
  1044. const show_yingsf_option_data = {
  1045. yearmonth: [],
  1046. yf_tp: [],
  1047. ys_tp: [],
  1048. };
  1049. if (yingsf_option_data.length > 0) {
  1050. // chart_option4_data 排序
  1051. const new_yingsf_option_data = _.sortBy(yingsf_option_data, 'yearmonth');
  1052. for (const c4 of new_yingsf_option_data) {
  1053. show_yingsf_option_data.yearmonth.push(c4.yearmonth);
  1054. const hadYsDatas = _.filter(new_yingsf_option_data, function (item) {
  1055. return item.yearmonth < c4.yearmonth;
  1056. });
  1057. // 找出最近的一个had_ys为true值
  1058. if (hadYsDatas.length > 0) {
  1059. c4.ys_tp = ZhCalc.add(hadYsDatas[hadYsDatas.length - 1].ys_tp, c4.ys_tp);
  1060. }
  1061. // if (!c4.had_ys) {
  1062. // const hadYsDatas = _.filter(new_yingsf_option_data, function (item) {
  1063. // return item.had_ys && item.yearmonth < c4.yearmonth;
  1064. // });
  1065. // // 找出最近的一个had_ys为true值
  1066. // if (hadYsDatas.length > 0) {
  1067. // c4.ys_tp = hadYsDatas[hadYsDatas.length - 1].ys_tp;
  1068. // }
  1069. // }
  1070. show_yingsf_option_data.ys_tp.push(c4.ys_tp);
  1071. const hadYfDatas = _.filter(new_yingsf_option_data, function (item) {
  1072. return item.yearmonth < c4.yearmonth;
  1073. });
  1074. // 找出最近的一个had_yf为true值
  1075. if (hadYfDatas.length > 0) {
  1076. c4.yf_tp = ZhCalc.add(hadYfDatas[hadYfDatas.length - 1].yf_tp, c4.yf_tp);
  1077. }
  1078. // if (!c4.had_yf) {
  1079. // const hadYfDatas = _.filter(new_yingsf_option_data, function (item) {
  1080. // return item.had_yf && item.yearmonth < c4.yearmonth;
  1081. // });
  1082. // // 找出最近的一个had_yf为true值
  1083. // if (hadYfDatas.length > 0) {
  1084. // c4.yf_tp = hadYfDatas[hadYfDatas.length - 1].yf_tp;
  1085. // }
  1086. // }
  1087. show_yingsf_option_data.yf_tp.push(c4.yf_tp);
  1088. }
  1089. }
  1090. const yingsf_option = yingsfChart.getOption();
  1091. yingsf_option.dataZoom[0].start = 0;
  1092. yingsf_option.dataZoom[0].end = computedPosition(show_yingsf_option_data.yearmonth.length);
  1093. yingsf_option.xAxis[0].data = show_yingsf_option_data.yearmonth;
  1094. yingsf_option.series[0].data = show_yingsf_option_data.ys_tp;
  1095. yingsf_option.series[1].data = show_yingsf_option_data.yf_tp;
  1096. if (show_yingsf_option_data.yearmonth.length >= 8) {
  1097. yingsf_option.dataZoom[0].show = true;
  1098. } else {
  1099. yingsf_option.dataZoom[0].show = false;
  1100. }
  1101. yingsfChart.setOption(yingsf_option);
  1102. const show_yisf_option_data = {
  1103. yearmonth: [],
  1104. yf_tp: [],
  1105. ys_tp: [],
  1106. };
  1107. if (yisf_option_data.length > 0) {
  1108. const new_yisf_option_data = _.sortBy(yisf_option_data, 'yearmonth');
  1109. for (const c4 of new_yisf_option_data) {
  1110. show_yisf_option_data.yearmonth.push(c4.yearmonth);
  1111. const hadYsDatas = _.filter(new_yisf_option_data, function (item) {
  1112. return item.yearmonth < c4.yearmonth;
  1113. });
  1114. // 找出最近的一个had_ys为true值
  1115. if (hadYsDatas.length > 0) {
  1116. c4.ys_tp = ZhCalc.add(hadYsDatas[hadYsDatas.length - 1].ys_tp, c4.ys_tp);
  1117. }
  1118. // if (!c4.had_ys) {
  1119. // const hadYsDatas = _.filter(new_yisf_option_data, function (item) {
  1120. // return item.had_ys && item.yearmonth < c4.yearmonth;
  1121. // });
  1122. // // 找出最近的一个had_ys为true值
  1123. // if (hadYsDatas.length > 0) {
  1124. // c4.ys_tp = hadYsDatas[hadYsDatas.length - 1].ys_tp;
  1125. // }
  1126. // }
  1127. show_yisf_option_data.ys_tp.push(c4.ys_tp);
  1128. const hadYfDatas = _.filter(new_yisf_option_data, function (item) {
  1129. return item.yearmonth < c4.yearmonth;
  1130. });
  1131. // 找出最近的一个had_yf为true值
  1132. if (hadYfDatas.length > 0) {
  1133. c4.yf_tp = ZhCalc.add(hadYfDatas[hadYfDatas.length - 1].yf_tp, c4.yf_tp);
  1134. }
  1135. // if (!c4.had_yf) {
  1136. // const hadYfDatas = _.filter(new_yisf_option_data, function (item) {
  1137. // return item.had_yf && item.yearmonth < c4.yearmonth;
  1138. // });
  1139. // // 找出最近的一个had_yf为true值
  1140. // if (hadYfDatas.length > 0) {
  1141. // c4.yf_tp = hadYfDatas[hadYfDatas.length - 1].yf_tp;
  1142. // }
  1143. // }
  1144. show_yisf_option_data.yf_tp.push(c4.yf_tp);
  1145. }
  1146. }
  1147. const yisf_option = yisfChart.getOption();
  1148. yisf_option.dataZoom[0].start = 0;
  1149. yisf_option.dataZoom[0].end = computedPosition(show_yisf_option_data.yearmonth.length);
  1150. yisf_option.xAxis[0].data = show_yisf_option_data.yearmonth;
  1151. yisf_option.series[0].data = show_yisf_option_data.ys_tp;
  1152. yisf_option.series[1].data = show_yisf_option_data.yf_tp;
  1153. if (show_yisf_option_data.yearmonth.length >= 8) {
  1154. yisf_option.dataZoom[0].show = true;
  1155. } else {
  1156. yisf_option.dataZoom[0].show = false;
  1157. }
  1158. yisfChart.setOption(yisf_option);
  1159. // 最底下1排4个管理图表输出设置和工程成本管理汇总表格设置
  1160. const gccbglhz = [];
  1161. if (dpgl_charts.length > 0) {
  1162. for (const d in dpCategory) {
  1163. if (d) {
  1164. const dpgl_option = dpgl_charts[d].getOption();
  1165. dpgl_option.dataZoom[0].start = 0;
  1166. const dpgl_chart_option_name = [];
  1167. const dpgl_chart_option_data = {
  1168. end_gather_tp: [],
  1169. end_sf_tp:[],
  1170. };
  1171. const cbgl_tenders = _.filter(tenderList, function (item) {
  1172. return _.findIndex(item.category, {cid: dpCategory[d].cid, value: dpCategory[d].id}) !== -1;
  1173. });
  1174. const oneCbgl = {
  1175. name: dpCategory[d].value,
  1176. end_gather_tp: 0,
  1177. end_sf_tp: 0,
  1178. end_yf_tp: 0,
  1179. }
  1180. for (const t of cbgl_tenders) {
  1181. dpgl_chart_option_name.push(t.name);
  1182. dpgl_chart_option_data.end_gather_tp.push(t.end_gather_tp ? t.end_gather_tp : 0);
  1183. dpgl_chart_option_data.end_sf_tp.push(t.end_sf_tp ? t.end_sf_tp : 0);
  1184. oneCbgl.end_gather_tp = t.end_gather_tp ? ZhCalc.add(oneCbgl.end_gather_tp, t.end_gather_tp) : oneCbgl.end_gather_tp;
  1185. oneCbgl.end_sf_tp = t.end_sf_tp ? ZhCalc.add(oneCbgl.end_sf_tp, t.end_sf_tp) : oneCbgl.end_sf_tp;
  1186. oneCbgl.end_yf_tp = t.end_yf_tp ? ZhCalc.add(oneCbgl.end_yf_tp, t.end_yf_tp) : oneCbgl.end_yf_tp;
  1187. }
  1188. oneCbgl.end_df_tp = ZhCalc.sub(oneCbgl.end_yf_tp, oneCbgl.end_sf_tp);
  1189. gccbglhz.push(oneCbgl);
  1190. dpgl_option.dataZoom[0].end = computedPosition(cbgl_tenders.length, 4);
  1191. dpgl_option.xAxis[0].data = dpgl_chart_option_name;
  1192. dpgl_option.series[0].data = dpgl_chart_option_data.end_gather_tp;
  1193. dpgl_option.series[1].data = dpgl_chart_option_data.end_sf_tp;
  1194. if (cbgl_tenders.length >= 4) {
  1195. dpgl_option.dataZoom[0].show = true;
  1196. } else {
  1197. dpgl_option.dataZoom[0].show = false;
  1198. }
  1199. dpgl_charts[d].setOption(dpgl_option);
  1200. }
  1201. }
  1202. }
  1203. const allgccb = {
  1204. name: '合计',
  1205. end_gather_tp: 0,
  1206. end_sf_tp: 0,
  1207. end_yf_tp: 0,
  1208. };
  1209. let hzHtml = '';
  1210. for (const cb of gccbglhz) {
  1211. allgccb.end_gather_tp = ZhCalc.add(allgccb.end_gather_tp, cb.end_gather_tp);
  1212. allgccb.end_sf_tp = ZhCalc.add(allgccb.end_sf_tp, cb.end_sf_tp);
  1213. allgccb.end_yf_tp = ZhCalc.add(allgccb.end_yf_tp, cb.end_yf_tp);
  1214. hzHtml += '<tr class="bg-dark" style="line-height: 2rem;text-align: center;"><td style="text-align: left;min-width: 95px;">' + cb.name + '</td><td>' + cb.end_gather_tp + '</td><td>' + cb.end_yf_tp + '</td><td>' + cb.end_sf_tp + '</td><td>' + cb.end_df_tp + '</td></tr>';
  1215. }
  1216. allgccb.end_df_tp = ZhCalc.sub(allgccb.end_yf_tp, allgccb.end_sf_tp);
  1217. hzHtml += '<tr class="bg-dark" style="line-height: 2rem;text-align: center;"><td style="text-align: left;min-width: 95px;">' + allgccb.name + '</td><td>' + allgccb.end_gather_tp + '</td><td>' + allgccb.end_yf_tp + '</td><td>' + allgccb.end_sf_tp + '</td><td>' + allgccb.end_df_tp + '</td></tr>';
  1218. $('.stage-data').html(hzHtml);
  1219. setTableboxHeight();
  1220. // console.log(sr_tenders, cb_tenders);
  1221. }
  1222. function setTableboxHeight() {
  1223. $('.tablebox').height($('.gccb').height() - 51);
  1224. }
  1225. let resizeTimer = null;
  1226. $(window).bind('resize', function () {
  1227. if (resizeTimer) clearTimeout(resizeTimer);
  1228. resizeTimer = setTimeout(function () {
  1229. echartsReset();
  1230. }, 500);
  1231. })
  1232. function echartsReset() {
  1233. gcsrmxChart.resize();
  1234. gcsrqkChart.resize();
  1235. yingsfChart.resize();
  1236. yisfChart.resize();
  1237. if (dpgl_charts.length > 0) {
  1238. for (const d in dpCategory) {
  1239. if (d) {
  1240. dpgl_charts[d].resize();
  1241. }
  1242. }
  1243. }
  1244. setTableboxHeight();
  1245. }
  1246. // 第一层分类选择
  1247. $("body").on('click', '#first-category .select-cate', function () {
  1248. const id = $(this).data('value');
  1249. $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
  1250. let newTenderList = tenders;
  1251. let categoryIndex = 0;
  1252. if (!id) {
  1253. $('#second-category').hide();
  1254. $('#first-category').children('button').attr('data-cid', '').attr('data-value', '');
  1255. } else {
  1256. // 获取第一层已选类别
  1257. const firstCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
  1258. $('#first-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
  1259. newTenderList = _.filter(tenders, function (item) {
  1260. return _.findIndex(item.category, firstCategory) !== -1;
  1261. })
  1262. categoryIndex = 1;
  1263. if (category[1] && category[1].value.length > 0) {
  1264. $('#second-category').show();
  1265. $('#second-category').children('button').text('全部').attr('data-cid', '').attr('data-value', '');
  1266. for (const [i,sc] of category[1].value.entries()) {
  1267. const scCategory = { cid: sc.cid, value: sc.id };
  1268. if (_.findIndex(newTenderList, function (item) {
  1269. return _.findIndex(item.category, scCategory) !== -1;}) === -1) {
  1270. $('#second-category .select-cate').eq(i+1).hide();
  1271. } else {
  1272. $('#second-category .select-cate').eq(i+1).show();
  1273. }
  1274. }
  1275. }
  1276. }
  1277. // console.log(newTenderList, categoryIndex);
  1278. setData(newTenderList, categoryIndex);
  1279. });
  1280. // 第二层分类选择
  1281. $("body").on('click', '#second-category .select-cate', function () {
  1282. const id = $(this).data('value');
  1283. // 获取第一层已选类别
  1284. const first_cid = $('#first-category').children('button').attr('data-cid');
  1285. const first_value = $('#first-category').children('button').attr('data-value');
  1286. const firstCategory = { cid: parseInt(first_cid), value: parseInt(first_value) };
  1287. let newTenderList = _.filter(tenders, function (item) {
  1288. return _.findIndex(item.category, firstCategory) !== -1;
  1289. });
  1290. let categoryIndex = 1;
  1291. $(this).parents('.dropdown-menu').siblings('button').text($(this).text());
  1292. if (id) {
  1293. // 获取第二层已选类别
  1294. const secondCategory = { cid: parseInt($(this).data('cid')), value: parseInt(id) };
  1295. $('#second-category').children('button').attr('data-cid', $(this).data('cid')).attr('data-value', id);
  1296. newTenderList = _.filter(newTenderList, function (item) {
  1297. return _.findIndex(item.category, secondCategory) !== -1;
  1298. });
  1299. categoryIndex = 2;
  1300. }
  1301. // console.log(newTenderList, categoryIndex);
  1302. setData(newTenderList, categoryIndex);
  1303. });
  1304. });
  1305. // 计算显示滚动条长度
  1306. function computedPosition(xArrayLength, maxNum = 8) {
  1307. if (xArrayLength >= maxNum) {
  1308. // return Math.floor(maxNum / xArrayLength * 100) > 100 ? 100 : Math.floor(maxNum / xArrayLength * 100);
  1309. const endValue = (maxNum / xArrayLength) * 100;
  1310. return endValue > Math.floor(endValue) + 0.5 ? Math.floor(endValue) + 0.5 : (Math.floor(endValue) === 0 ? 0.5 : Math.floor(endValue));
  1311. // return Math.round((maxNum / xArrayLength) * 100 * 100)/100;
  1312. // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
  1313. } else {
  1314. return 100;
  1315. }
  1316. }
  1317. function formatNum(num, pattern) {
  1318. const minus = num > 0 ? '' : '-'
  1319. const strarr = num ? Math.abs(num).toString().split('.') : ['0'];
  1320. const fmtarr = pattern ? pattern.split('.') : [''];
  1321. let retstr = '';
  1322. // 整数部分
  1323. let str = strarr[0];
  1324. let fmt = fmtarr[0];
  1325. let i = str.length - 1;
  1326. let comma = false;
  1327. for (var f = fmt.length - 1; f >= 0; f--) {
  1328. switch (fmt.substr(f, 1)) {
  1329. case '#':
  1330. if (i >= 0) retstr = str.substr(i--, 1) + retstr;
  1331. break;
  1332. case '0':
  1333. if (i >= 0) retstr = str.substr(i--, 1) + retstr;
  1334. else retstr = '0' + retstr;
  1335. break;
  1336. case ',':
  1337. comma = true;
  1338. retstr = ',' + retstr;
  1339. break;
  1340. }
  1341. }
  1342. if (i >= 0) {
  1343. if (comma) {
  1344. const l = str.length;
  1345. for (;i >= 0; i--) {
  1346. retstr = str.substr(i, 1) + retstr;
  1347. if (i > 0 && ((l - i) % 3) == 0) retstr = ',' + retstr;
  1348. }
  1349. } else retstr = str.substr(0, i + 1) + retstr;
  1350. }
  1351. retstr = retstr + '.';
  1352. // 处理小数部分
  1353. str = strarr.length > 1 ? strarr[1] : '';
  1354. fmt = fmtarr.length > 1 ? fmtarr[1] : '';
  1355. i = 0;
  1356. for (var f = 0; f < fmt.length; f++) {
  1357. switch (fmt.substr(f, 1)) {
  1358. case '#':
  1359. if (i < str.length) retstr += str.substr(i++, 1);
  1360. break;
  1361. case '0':
  1362. if (i < str.length) retstr += str.substr(i++, 1);
  1363. else retstr += '0';
  1364. break;
  1365. }
  1366. }
  1367. return minus + retstr.replace(/^,+/, '').replace(/\.$/, '');
  1368. }
  1369. </script>