index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <div class="table-container">
  3. <vab-query-form>
  4. <vab-query-form-left-panel>
  5. <el-form
  6. ref="searchForm"
  7. :inline="true"
  8. @submit.native.prevent
  9. >
  10. <el-form-item>
  11. 标记时间:
  12. <el-date-picker
  13. v-model="searchForm.signTime"
  14. type="date"
  15. format="yyyy-MM-dd HH:mm:ss"
  16. value-format="yyyy-MM-dd HH:mm:ss"
  17. placeholder="选择日期">
  18. </el-date-picker>
  19. </el-form-item>
  20. <el-form-item>
  21. <el-button
  22. icon="el-icon-search"
  23. type="primary"
  24. native-type="submit"
  25. @click="handleQuery"
  26. >
  27. 查询
  28. </el-button>
  29. </el-form-item>
  30. </el-form>
  31. </vab-query-form-left-panel>
  32. <vab-query-form-right-panel :span="1">
  33. </vab-query-form-right-panel>
  34. </vab-query-form>
  35. <el-table
  36. ref="table"
  37. v-loading="listLoading"
  38. :data="tableData"
  39. :element-loading-text="elementLoadingText"
  40. :height="height"
  41. :header-cell-style="{ 'text-align': 'center' }"
  42. :cell-style="{ 'text-align': 'center' }"
  43. >
  44. <el-table-column show-overflow-tooltip label="序号" width="95">
  45. <template #default="scope">
  46. {{ scope.$index + 1 }}
  47. </template>
  48. </el-table-column>
  49. <el-table-column show-overflow-tooltip label="标记时间" prop="signTime" />
  50. <el-table-column show-overflow-tooltip label="解析时间" prop="analysisTime"/>
  51. <el-table-column show-overflow-tooltip label="回传时间" prop="backTime" />
  52. <el-table-column show-overflow-tooltip label="预测时间" prop="forecastTime" />
  53. <el-table-column show-overflow-tooltip label="预测功率" prop="forecastValue" />
  54. <el-table-column show-overflow-tooltip label="预测开机" prop="forecastOpenCap" />
  55. </el-table>
  56. <el-pagination
  57. :background="background"
  58. :current-page="page.currentPage"
  59. :layout="layout"
  60. :page-size="page.pageSize"
  61. :total="page.total"
  62. @current-change="handleCurrentChange"
  63. @size-change="handleSizeChange"
  64. ></el-pagination>
  65. </div>
  66. </template>
  67. <script>
  68. import { fetchList } from '@/api/backforefp'
  69. export default {
  70. name: 'Record',
  71. data() {
  72. return {
  73. tableData: [],
  74. searchForm: {signTime:this.dateFormat("yyyy-MM-dd HH:mm:ss",new Date(new Date().setHours(0, 0, 0, 0))),},
  75. listLoading: true,
  76. layout: 'total, sizes, prev, pager, next, jumper',
  77. total: 0,
  78. background: true,
  79. elementLoadingText: '正在加载...',
  80. page: {
  81. total: 0, // 总页数
  82. currentPage: 1, // 当前页数
  83. pageSize: 20, // 每页显示多少条
  84. },
  85. }
  86. },
  87. computed: {
  88. height() {
  89. return this.$baseTableHeight()
  90. },
  91. },
  92. created() {
  93. this.fetchData()
  94. },
  95. methods: {
  96. async fetchData() {
  97. this.listLoading = true
  98. fetchList(
  99. Object.assign(
  100. {
  101. current: this.page.currentPage,
  102. size: this.page.pageSize,
  103. },
  104. this.searchForm
  105. )
  106. )
  107. .then((response) => {
  108. this.tableData = response.data.records
  109. this.page.total = response.data.total
  110. this.listLoading = false
  111. })
  112. .catch(() => {
  113. this.listLoading = false
  114. })
  115. },
  116. handleSizeChange(val) {
  117. this.page.pageSize = val
  118. this.page.currentPage = 1
  119. this.fetchData()
  120. },
  121. handleCurrentChange(val) {
  122. this.page.currentPage = val
  123. this.fetchData()
  124. },
  125. handleQuery() {
  126. for (var v in this.searchForm) {
  127. if (this.searchForm[v] == '') {
  128. delete this.searchForm[v]
  129. }
  130. }
  131. this.page.currentPage = 1
  132. this.fetchData()
  133. },
  134. dateFormat(fmt, date) {
  135. let ret
  136. const opt = {
  137. 'y+': date.getFullYear().toString(), // 年
  138. 'M+': (date.getMonth() + 1).toString(), // 月
  139. 'd+': date.getDate().toString(), // 日
  140. 'H+': date.getHours().toString(), // 时
  141. 'm+': date.getMinutes().toString(), // 分
  142. 's+': date.getSeconds().toString(), // 秒
  143. // 有其他格式化字符需求可以继续添加,必须转化成字符串
  144. }
  145. for (let k in opt) {
  146. ret = new RegExp('(' + k + ')').exec(fmt)
  147. if (ret) {
  148. fmt = fmt.replace(
  149. ret[1],
  150. ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
  151. )
  152. }
  153. }
  154. return fmt
  155. },
  156. },
  157. }
  158. </script>
  159. <style>
  160. .demo-table-expand {
  161. font-size: 0;
  162. }
  163. .demo-table-expand label {
  164. width: 90px;
  165. color: #99a9bf;
  166. }
  167. .demo-table-expand .el-form-item {
  168. margin-right: 0;
  169. margin-bottom: 0;
  170. width: 50%;
  171. }
  172. </style>