..

src/views/order/orderStatistics/index.vue

@@ -31,14 +31,7 @@
 					</el-col>
 				</el-row>
 			</el-form>
-      <el-table
-        :data="list"
-        border
-        fit
-        highlight-current-row
-        style="width: 100%"
-        v-loading="loading"
-      >
+			<el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading">
 				<el-table-column align="center" label="时间">
 					<template scope="scope">
 						<span>{{scope.row.timeSlot}}</span>
@@ -80,119 +73,146 @@
 					</template>
 				</el-table-column>
 			</el-table>
+
+			<el-pagination
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:current-page.sync="listQuery.page"
+				:page-sizes="[10,20,30, 50]"
+				:page-size="listQuery.limit"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="total"
+        style="margin-top:20px"
+			></el-pagination>
 		</div>
 	</div>
 </template>
 <script>
-import { orderStatistics, downloadExcel } from "api/order/rentVehicle";
+import { orderStatistics, downloadExcel } from 'api/order/rentVehicle'
 export default {
 	created() {
-    this.getList();
+		this.getList()
 	},
 	data() {
 		return {
 			loading: false,
+			total: null,
 			list: [],
 			// 统计时间筛选
 			listQuery: {
-        time: "null",
-        type: "1",
+				time: 'null',
+				type: '1',
 				startTime: null,
-        endTime: null
+				endTime: null,
+				time: '',
+				limit: 10,
+				page: 1
 			},
 			//统计方式筛选
 			way: [
 				{
-          label: "日统计",
-          id: "1"
+					label: '日统计',
+					id: '1'
 				},
 				{
-          label: "周统计",
-          id: "2"
+					label: '周统计',
+					id: '2'
 				},
 				{
-          label: "月统计",
-          id: "3"
+					label: '月统计',
+					id: '3'
 				}
 			],
-      isactive: "日统计"
-    };
+			isactive: '日统计'
+		}
 	},
 	methods: {
 		//统计时间筛选
 		changeTime() {
 			!!this.listQuery.time[0]
 				? (this.listQuery.startTime = this.listQuery.time[0].getTime())
-        : (this.listQuery.startTime = null);
+				: (this.listQuery.startTime = null)
 			!!this.listQuery.time[1]
 				? (this.listQuery.endTime = this.listQuery.time[1].getTime())
-        : (this.listQuery.endTime = null);
-      this.getList();
+				: (this.listQuery.endTime = null)
+			this.getList()
 		},
 		//统计方式筛选
 		changeWay(val) {
-      this.isactive = val.label;
-      this.listQuery.type = val.id;
-      this.getList();
+			this.isactive = val.label
+			this.listQuery.type = val.id
+			this.getList()
 		},
 		//导出
 		handleFilter() {
 			downloadExcel(this.listQuery).then(res => {
-        const content = res;
-        const blob = new Blob([content]);
-        const fileName = "导出信息.xlsx";
-        if ("download" in document.createElement("a")) {
+				const content = res
+				const blob = new Blob([content])
+				const fileName = '导出信息.xlsx'
+				if ('download' in document.createElement('a')) {
 					// 非IE下载
-          const elink = document.createElement("a");
-          elink.download = fileName;
-          elink.style.display = "none";
-          elink.href = URL.createObjectURL(blob);
-          document.body.appendChild(elink);
-          elink.click();
-          URL.revokeObjectURL(elink.href); // 释放URL 对象
-          document.body.removeChild(elink);
+					const elink = document.createElement('a')
+					elink.download = fileName
+					elink.style.display = 'none'
+					elink.href = URL.createObjectURL(blob)
+					document.body.appendChild(elink)
+					elink.click()
+					URL.revokeObjectURL(elink.href) // 释放URL 对象
+					document.body.removeChild(elink)
 				} else {
 					// IE10+下载
-          navigator.msSaveBlob(blob, fileName);
+					navigator.msSaveBlob(blob, fileName)
 				}
-      });
+			})
+		},
+		handleSizeChange(val) {
+			this.listQuery.limit = val
+			this.getList()
+		},
+		handleCurrentChange(val) {
+			this.listQuery.page = val
+			this.getList()
 		},
 		//列表
 		getList() {
-      let params = {};
-      this.loading = true;
+			let params = {}
+			this.loading = true
 			orderStatistics(this.listQuery).then(data => {
-        console.log(data);
+				console.log(data.data.list)
 				if (data.status == 200) {
-          data.data.forEach(element => {
+					data.data.list.forEach(element => {
 						for (let i in element.members) {
 							if (element.members[i].level == 1) {
-                element.pAmount = element.members[i].amount;
-                element.plevel = element.members[i].level;
-                element.pMemberName = element.members[i].memberName;
-                element.pNumber = element.members[i].number;
+								element.pAmount = element.members[i].amount
+								element.plevel = element.members[i].level
+								element.pMemberName =
+									element.members[i].memberName
+								element.pNumber = element.members[i].number
 							} else if (element.members[i].level == 2) {
-                element.goldAmount = element.members[i].amount;
-                element.goldlevel = element.members[i].level;
-                element.goldMemberName = element.members[i].memberName;
-                element.goldNumber = element.members[i].number;
+								element.goldAmount = element.members[i].amount
+								element.goldlevel = element.members[i].level
+								element.goldMemberName =
+									element.members[i].memberName
+								element.goldNumber = element.members[i].number
 							} else if (element.members[i].level == 3) {
-                element.hAmount = element.members[i].amount;
-                element.hlevel = element.members[i].level;
-                element.hMemberName = element.members[i].memberName;
-                element.hNumber = element.members[i].number;
+								element.hAmount = element.members[i].amount
+								element.hlevel = element.members[i].level
+								element.hMemberName =
+									element.members[i].memberName
+								element.hNumber = element.members[i].number
 							}
 						}
-          });
-          this.list = data.data;
+          })
+          this.total = data.data.total;
+					this.list = data.data.list
 				}
 				setTimeout(() => {
-          this.loading = false;
-        }, 300);
-      });
+					this.loading = false
+				}, 300)
+			})
 		}
 	}
-};
+}
 </script>
 <style>
 .wayMsg span {