parkingReallyIncome.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!-- 停车场实收统计 -->
  2. <template>
  3. <view class="container">
  4. <view class="table">
  5. <view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
  6. <view class="table-box">
  7. <uni-table emptyText="暂无更多数据">
  8. <!-- 表头行 -->
  9. <uni-tr>
  10. <uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index" :width="item.width || ''">{{ item.field }}
  11. </uni-th>
  12. </uni-tr>
  13. <!-- 表格数据行 -->
  14. <uni-tr v-for="(item, index) in tableData.list" :key="index">
  15. <uni-td class="table-box-td" align="center">{{ item.road }}</uni-td>
  16. <uni-td class="table-box-td" align="center">{{ item.num }}</uni-td>
  17. <uni-td class="table-box-td" align="center">{{ item.really }}</uni-td>
  18. </uni-tr>
  19. </uni-table>
  20. </view>
  21. <view class="table-pagination">
  22. <uni-pagination show-icon="true" :total="tableData.total" :current="tableData.current"></uni-pagination>
  23. </view>
  24. </view>
  25. <view class="total">
  26. <view>
  27. 停车数量<text>{{ totalData.num }}</text>辆,实收金额<text>{{ totalData.really }}</text>元
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. props: {
  35. currentDate: {
  36. type: Array,
  37. default: []
  38. },
  39. tableTh: {
  40. type: Array,
  41. default: () => {
  42. return [
  43. { field: '停车场名称', width: 120 },
  44. { field: '停车数量(次)', width: 120 },
  45. { field: '实收金额(元)', width: 80 }
  46. ]
  47. }
  48. },
  49. tableData: {
  50. type: Object,
  51. default: () => {
  52. return {
  53. current: 1,
  54. total: 30,
  55. list: [{
  56. num: 1001,
  57. name: 'xxx',
  58. road: '金科路',
  59. really: 80
  60. },
  61. {
  62. num: 1001,
  63. name: 'xxx',
  64. road: '金科路',
  65. should: 100,
  66. really: 80
  67. },
  68. {
  69. num: 1001,
  70. name: 'xxx',
  71. road: '金科路',
  72. should: 100,
  73. really: 80
  74. },
  75. {
  76. num: 1001,
  77. name: 'xxx',
  78. road: '金科路',
  79. should: 100,
  80. really: 80
  81. },
  82. {
  83. num: 1001,
  84. name: 'xxx',
  85. road: '金科路',
  86. should: 100,
  87. really: 80
  88. },
  89. {
  90. num: 1001,
  91. name: 'xxx',
  92. road: '金科路',
  93. should: 100,
  94. really: 80
  95. },
  96. {
  97. num: 1001,
  98. name: 'xxx',
  99. road: '金科路',
  100. should: 100,
  101. really: 80
  102. },
  103. {
  104. num: 1001,
  105. name: 'xxx',
  106. road: '金科路',
  107. should: 100,
  108. really: 80
  109. },
  110. {
  111. num: 1001,
  112. name: 'xxx',
  113. road: '金科路',
  114. should: 100,
  115. really: 80
  116. }
  117. ]
  118. }
  119. }
  120. },
  121. totalData: {
  122. type: Object,
  123. default: () => {
  124. return {
  125. num: 100,
  126. really: 80
  127. }
  128. }
  129. }
  130. }
  131. }
  132. </script>
  133. <style lang="scss" scoped>
  134. @import './report.scss';
  135. </style>