receiptTrainRevenue.html 5.8 KB

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