|
@@ -1,31 +1,14 @@
|
|
|
<template>
|
|
|
- <el-scrollbar style="height: 100%">
|
|
|
<div>
|
|
|
- <div style="width: 99%">
|
|
|
- <span style="color: #ff9955; font-size: 25px">|</span>
|
|
|
- <span style="font-size: 20px">数据概览</span>
|
|
|
- <el-row :gutter="10" class="panel-group">
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
- <div class="flex xiaoliang">
|
|
|
- <div style="font-size: 28px">电子会员余额</div>
|
|
|
- <div style="line-height: 62px; font-size: 32px">
|
|
|
- {{ hzAmt }}元
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="12" :sm="12" :lg="6">
|
|
|
- <div class="flex xiaoe">
|
|
|
- <div style="font-size: 28px">电子会员总数</div>
|
|
|
- <div style="line-height: 62px; font-size: 32px">
|
|
|
- {{ cardNum }}个
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div style="width: 99%; height: 181px">
|
|
|
- <span style="color: #ff9955; font-size: 25px">|</span>
|
|
|
- <span style="font-size: 20px">详情:</span>
|
|
|
+ <el-form :model="sumForm">
|
|
|
+ <el-form-item label="电子卡总余额">
|
|
|
+ {{ hzAmt }}元
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="总会员个数">
|
|
|
+ {{ cardNum }}个
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电子卡每日动态变化值">
|
|
|
+ <div>
|
|
|
<el-table :data="dayReportList">
|
|
|
<el-table-column label="日期" align="center" prop="createTime">
|
|
|
<template slot-scope="scope">
|
|
@@ -36,31 +19,17 @@
|
|
|
<el-table-column label="消费金额" align="center" prop="xfamt" />
|
|
|
<el-table-column label="新增电子会员" align="center" prop="cardnum" />
|
|
|
</el-table>
|
|
|
- <div style="float: right">
|
|
|
- <!-- <el-pagination
|
|
|
- style="padding-top: 15px"
|
|
|
- @size-change="findSizeChange"
|
|
|
- @current-change="findPage"
|
|
|
- :current-page.sync="pageNow"
|
|
|
- background
|
|
|
- :pager-count="7"
|
|
|
- :page-sizes="[5, 10, 20, 50, 100]"
|
|
|
- :page-size="size"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- >
|
|
|
- </el-pagination> -->
|
|
|
- <pagination
|
|
|
- v-show="total > 0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNo"
|
|
|
- :limit.sync="queryParams.pageSetting"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNo"
|
|
|
+ :limit.sync="queryParams.pageSetting"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- </el-scrollbar>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -69,96 +38,42 @@ export default {
|
|
|
name: "Dzk_Report",
|
|
|
data() {
|
|
|
return {
|
|
|
- charts: null,
|
|
|
- size: 10,
|
|
|
- pageNow: 1,
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
hzAmt: 0,
|
|
|
cardNum: 0,
|
|
|
- // 弹出层标题
|
|
|
- rows: [],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageSetting: 10,
|
|
|
- pageNum: 1,
|
|
|
- createdDate: null,
|
|
|
- stationId: null,
|
|
|
- stationName: null,
|
|
|
- beginTime: null,
|
|
|
- endTime: null,
|
|
|
- payDate: null,
|
|
|
- status: "1",
|
|
|
+ pageNo: 1
|
|
|
},
|
|
|
- //数据
|
|
|
dayReportList: [],
|
|
|
- // 表单参数
|
|
|
- form: {
|
|
|
- czAmt: 0,
|
|
|
- xfAmt: 0,
|
|
|
- },
|
|
|
- // 表单校验
|
|
|
- rules: {},
|
|
|
+ sumForm:{}
|
|
|
};
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
- this.getHZlist();
|
|
|
- this.getList();
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
- usageTypeFotmat(row, column) {
|
|
|
- if (row.usageType === "+") {
|
|
|
- return "充值";
|
|
|
- } else if (row.usageType === "-") {
|
|
|
- return "消费";
|
|
|
- }
|
|
|
- },
|
|
|
- payTypeFotmat(row, column) {
|
|
|
- if (row.payType === "1") {
|
|
|
- return "小程序";
|
|
|
- } else if (row.payType === "2") {
|
|
|
- return "POS";
|
|
|
- }
|
|
|
- },
|
|
|
- cardOilsTypeFotmat(row, column) {
|
|
|
- if (row.cardOilsType === "1") {
|
|
|
- return "汽油";
|
|
|
- } else if (row.cardOilsType === "2") {
|
|
|
- return "柴油";
|
|
|
- }
|
|
|
+ init(){
|
|
|
+ this.getHZlist();
|
|
|
+ this.getList();
|
|
|
},
|
|
|
- /** 查询电子会员数据 */
|
|
|
getList() {
|
|
|
- this.dayReportDetail();
|
|
|
+ selectCard(this.queryParams).then((response) => {
|
|
|
+ this.dayReportList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ });
|
|
|
},
|
|
|
getHZlist() {
|
|
|
- //汇总电子会员数据
|
|
|
listSum().then((response) => {
|
|
|
if (response.hasOwnProperty("data")) {
|
|
|
this.cardNum = response.data.num;
|
|
|
this.hzAmt = response.data.amt;
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- findPage(val) {
|
|
|
- this.pageNow = val;
|
|
|
- this.dayReportDetail();
|
|
|
- },
|
|
|
- findSizeChange(size) {
|
|
|
- //将val赋值给size
|
|
|
- this.size = size;
|
|
|
- //重新去后台查询数据
|
|
|
- this.dayReportDetail();
|
|
|
- },
|
|
|
- dayReportDetail() {
|
|
|
- // this.queryParams.pageNo = this.pageNow;
|
|
|
- // this.queryParams.pageSetting = this.size;
|
|
|
- selectCard(this.queryParams).then((response) => {
|
|
|
- this.dayReportList = response.rows;
|
|
|
- this.total = response.total;
|
|
|
- });
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|