receiptTrainRevenue.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!-- include '../header' -->
  2. <script src="<?= receipt ?>"></script>
  3. <script src="<?= WEB_SITE_GLOBAL ?>js/echarts.common.min.js"> </script>
  4. <body>
  5. <div class="mainLayout">
  6. <div class="mainMenu">
  7. <div class="menuItem">
  8. <a href="#" class="mLogo">CLD</a>
  9. <ul>
  10. <!-- include '../admin/menuReceipt' -->
  11. </ul>
  12. </div>
  13. </div>
  14. <div class="warpContent">
  15. <div class="subMenu fL">
  16. <div class="menuItem">
  17. <!-- include '../admin/receipt_menu' -->
  18. </div>
  19. </div>
  20. <div class="adminContent autoHeight">
  21. <div class="saea-borad">
  22. <div class="borad-menu">
  23. </div>
  24. <div class="borad-news">
  25. <div class="saeaList">
  26. <div class="clearfix">
  27. <div id="chartContainer3" style="height: 300px; width: 100%;">
  28. </div>
  29. </div>
  30. <!--预留-->
  31. <!-- <div class="clearfix">
  32. <legend><div class="fR"></div>待处理(收款转入)</legend>
  33. <table class="table table-bordered table-condensed">
  34. <tbody>
  35. <tr><th class="taC" width="140">收款金额</th><th class="taC">银行到帐信息</th><th class="taC">银行/到帐时间</th><th class="taC">收款录入</th><th class="taC">操作</th></tr>
  36. </tbody>
  37. </table>
  38. </div> -->
  39. <div class="clearfix">
  40. <legend>收款未完成</legend>
  41. <table class="table table-bordered table-condensed">
  42. <tbody>
  43. <tr>
  44. <th class="taC">培训班名称</th>
  45. <th class="taC">开班时间</th>
  46. <th class="taC">完成结算</th>
  47. <th class="taC">开票金额</th>
  48. <th class="taC">实际收款金额</th>
  49. <th class="taC">应收款总额</th>
  50. </tr>
  51. <!-- loop unpaid -->
  52. <tr>
  53. <th><a href="/receiptTrain/approval/{{unpaid' value.ridKey}}.html">{{unpaid' value.trainName}}</a></th>
  54. <td class="taC">{{unpaid' value.trainStartDate}}</td>
  55. <td class="taC">{{unpaid' value.trainEndDate}}</td>
  56. <td class="taR">¥{{unpaid' value.iTrain.invoiceTotalAmount}}</td>
  57. <td class="taR">¥{{unpaid' value.iTrain.invoiceArriveAmount}}</td>
  58. <td class="taR colRed">¥{{unpaid' value.iTrain.receivablesAmount}}</td>
  59. </tr>
  60. <!-- endloop -->
  61. </tbody>
  62. </table>
  63. </div>
  64. <div class="clearfix">
  65. <legend><div class="fR"><a href="/receiptTrainRevenueAchieve">所有培训班</a></div>最近收款完成</legend>
  66. <table class="table table-bordered table-condensed">
  67. <tbody>
  68. <tr>
  69. <th class="taC">培训班名称</th>
  70. <th class="taC">开班时间</th>
  71. <th class="taC">完成结算</th>
  72. <th class="taC">收入</th>
  73. <th class="taC">支出</th>
  74. <th class="taC">利润</th>
  75. </tr>
  76. <!-- loop paid -->
  77. <tr>
  78. <th><a href="/receiptTrain/approval/{{unpaid' value.ridKey}}.html">{{unpaid' value.trainName}}</a></th>
  79. <td class="taC">{{unpaid' value.trainStartDate}}</td>
  80. <td class="taC">{{unpaid' value.trainEndDate}}</td>
  81. <td class="taR">¥{{unpaid' value.iTrain.invoiceTotalAmount}}</td>
  82. <td class="taR">¥{{unpaid' value.iTrain.expendAmount}}</td>
  83. <td class="taR">¥{{unpaid' value.iTrain.profit}}</td>
  84. </tr>
  85. <!-- endloop -->
  86. </tbody>
  87. </table>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <script type="text/javascript">autoFlashHeight();</script>
  94. <script type="text/javascript">
  95. // 基于准备好的dom,初始化echarts图表
  96. var myChart = echarts.init(document.getElementById('chartContainer3'));
  97. var option = {
  98. color: ["#F56954", "#00A65A", "#3C8DBC"],
  99. title: {
  100. text: '培训班营收图表'
  101. },
  102. tooltip: {
  103. trigger: 'axis',
  104. formatter: "{b} <br/>{a}:{c} 元<br/>{a1}:{c1} 元<br/>{a2}:{c2} 元"
  105. },
  106. legend: {
  107. data: ['支出', '收入', '利润']
  108. },
  109. toolbox: {
  110. show: true,
  111. feature: {
  112. magicType: { show: true, type: ['line', 'bar'] }
  113. }
  114. },
  115. dataZoom: {
  116. show: true,
  117. start: 0,
  118. end: 100
  119. },
  120. xAxis: [{
  121. type: 'category',
  122. boundaryGap: true,
  123. data: {{month}}
  124. }],
  125. yAxis: [{
  126. type: 'value',
  127. axisLabel: {
  128. formatter: '{value} 元'
  129. },
  130. splitArea: { show: true }
  131. }],
  132. series: [{
  133. name: '支出',
  134. type: 'line',
  135. itemStyle: {
  136. normal: {
  137. lineStyle: {
  138. shadowColor: 'rgba(0,0,0,0.4)',
  139. shadowBlur: 5,
  140. shadowOffsetX: 3,
  141. shadowOffsetY: 3
  142. }
  143. }
  144. },
  145. data: {{pay}}
  146. },
  147. {
  148. name: '收入',
  149. type: 'line',
  150. itemStyle: {
  151. normal: {
  152. lineStyle: {
  153. shadowColor: 'rgba(0,0,0,0.4)',
  154. shadowBlur: 5,
  155. shadowOffsetX: 3,
  156. shadowOffsetY: 3
  157. }
  158. }
  159. },
  160. data: {{income}}
  161. },
  162. {
  163. name: '利润',
  164. type: 'line',
  165. itemStyle: {
  166. normal: {
  167. lineStyle: {
  168. shadowColor: 'rgba(0,0,0,0.4)',
  169. shadowBlur: 5,
  170. shadowOffsetX: 3,
  171. shadowOffsetY: 3
  172. }
  173. }
  174. },
  175. data: {{profit}}
  176. }
  177. ]
  178. };
  179. // 为echarts对象加载数据
  180. myChart.setOption(option);
  181. //3 标段计量分布//
  182. </script>
  183. </body>