console-main.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport"
  6. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <!-- 所有的 css & js 资源 -->
  8. <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
  9. <link rel="stylesheet" href="../../static/sa.css">
  10. <script src="../../static/kj/jquery.min.js"></script>
  11. <script src="../../static/kj/layer/layer.js"></script>
  12. <script src="../../static/sa.js"></script>
  13. <style type="text/css">
  14. .vue-box {
  15. margin: 0;
  16. padding: 0;
  17. height: 100%;
  18. }
  19. .el-card {
  20. border-radius: 0px;
  21. border: 1px #ddd solid;
  22. margin-bottom: 14px;
  23. }
  24. .s-row {
  25. /* background-color: antiquewhite; */
  26. padding: 0 14px;
  27. padding-bottom: 0px;
  28. }
  29. .s-row-1 {
  30. padding-top: 14px;
  31. }
  32. .s-row-2 {
  33. /* margin-top: -10px; */
  34. }
  35. .s-row-2 .el-card .el-card__body {
  36. height: 250px;
  37. }
  38. .s-row-3 .el-card {
  39. /* height: 100%; */
  40. }
  41. .echarts-div {
  42. height: 100%;
  43. }
  44. .s-row-3 .el-alert {
  45. margin-bottom: 14px;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="vue-box" style="height: 980px;width: 100%;">
  51. <div class="s-row s-row-1">
  52. <com-sta-data></com-sta-data>
  53. </div>
  54. <el-row :gutter="10">
  55. <el-col span="12">
  56. <el-card class="box-card" style="height: 600px;overflow-y: auto;">
  57. <div slot="header" class="clearfix">
  58. <span>业务类型统计</span>
  59. <div style="float: right; padding: 3px 0">
  60. <el-date-picker v-model="feeType.date" type="daterange" range-separator="至"
  61. start-placeholder="开始日期" end-placeholder="结束日期" @change="getFeeTypeStatics">
  62. </el-date-picker>
  63. </div>
  64. <div>
  65. <el-table :data="feeType.list">
  66. <el-table-column type="index" width="50" label="序号">
  67. </el-table-column>
  68. <el-table-column prop="name" label="名称">
  69. </el-table-column>
  70. <el-table-column prop="total" label="数量">
  71. </el-table-column>
  72. <el-table-column prop="price" label="金额(元)">
  73. </el-table-column>
  74. </el-table>
  75. </div>
  76. </div>
  77. </el-card>
  78. </el-col>
  79. <el-col span="12">
  80. <el-card class="box-card" style="height: 600px;overflow-y: auto;">
  81. <div slot="header" class="clearfix">
  82. <span>收费项目统计</span>
  83. <div style="float: right; padding: 3px 0">
  84. <el-date-picker v-model="itemType.date" type="daterange" range-separator="至"
  85. start-placeholder="开始日期" end-placeholder="结束日期" @change="itemTypeStatics">
  86. </el-date-picker>
  87. </div>
  88. <div>
  89. <el-table :data="itemType.list">
  90. <el-table-column type="index" width="50" label="序号">
  91. </el-table-column>
  92. <el-table-column prop="name" label="名称">
  93. </el-table-column>
  94. <el-table-column prop="total" label="数量">
  95. </el-table-column>
  96. <el-table-column prop="price" label="金额(元)">
  97. </el-table-column>
  98. </el-table>
  99. </div>
  100. </div>
  101. </el-card>
  102. </el-col>
  103. </el-row>
  104. </div>
  105. <script src="../../static/kj/vue.min.js"></script>
  106. <script src="../../static/kj/element-ui/index.js"></script>
  107. <script src="../../static/kj/httpVueLoader.js"></script>
  108. <script src="../../static/kj/jquery.min.js"></script>
  109. <script src="../../static/kj/layer/layer.js"></script>
  110. <!-- <script src="https://unpkg.com/echarts@4.6.0/dist/echarts-en.min.js"></script> -->
  111. <script src="../../static/sa.js"></script>
  112. <script type="text/javascript">
  113. var app = new Vue({
  114. components: {
  115. 'com-sta-data': httpVueLoader('com-sta-data.vue'),
  116. 'com-chart-1': httpVueLoader('com-chart-1.vue'),
  117. 'com-chart-2': httpVueLoader('com-chart-2.vue'),
  118. 'com-chart-3': httpVueLoader('com-chart-3.vue'),
  119. 'com-stack': httpVueLoader('com-stack.vue'),
  120. 'com-update-log': httpVueLoader('com-update-log.vue'),
  121. 'com-origin': httpVueLoader('com-origin.vue'),
  122. // 'com-intro': httpVueLoader('com-intro.vue'),
  123. },
  124. el: '.vue-box',
  125. data: {
  126. feeType: {
  127. date: [new Date(), new Date()],
  128. list:[],
  129. p:{
  130. startDay:'',
  131. endDay:''
  132. }
  133. },
  134. itemType: {
  135. date: [new Date(), new Date()],
  136. list:[],
  137. p:{
  138. startDay:'',
  139. endDay:''
  140. }
  141. },
  142. car: {
  143. totalCar: 1,
  144. inCar: 2,
  145. outCar: 3,
  146. weightCar: 0,
  147. emptyCar: 0
  148. }
  149. },
  150. methods: {
  151. itemTypeStatics(){
  152. let days=this.itemType.date;
  153. let p=this.itemType.p;
  154. if(days.length==2){
  155. p.startDay=sa.forDate(days[0]);
  156. p.endDay=sa.forDate(days[1]);
  157. }
  158. sa.ajax('/TbFeeDetails/itemTypeStatics',sa.removeNull(p), function(resp) {
  159. this.itemType.list=resp.data;
  160. }.bind(this))
  161. },
  162. getFeeTypeStatics() {
  163. let days=this.feeType.date;
  164. let p=this.feeType.p;
  165. if(days.length==2){
  166. p.startDay=sa.forDate(days[0]);
  167. p.endDay=sa.forDate(days[1]);
  168. }
  169. sa.ajax('/TbFeeDetails/feeTypeStatics',sa.removeNull(p), function(resp) {
  170. this.feeType.list=resp.data;
  171. }.bind(this))
  172. }
  173. },
  174. mounted: function() {
  175. this.getFeeTypeStatics();
  176. this.itemTypeStatics();
  177. }
  178. })
  179. // 设置监听,改变窗口大小时重绘图表
  180. window.myChartList = [];
  181. window.onresize = function() {
  182. myChartList.forEach(function(myChart) {
  183. myChart.resize();
  184. })
  185. }
  186. </script>
  187. </body>
  188. </html>