jsowell-charger-web/jsowell-ui/src/views/pile/merchant/components/revenue.vue

<template>
    <div class="app-container">
      <h2>营收总报</h2>
        <el-descriptions >
    <el-descriptions-item label="用电度数">{{merchantOrderReport.useElectricity}}度</el-descriptions-item>
    <el-descriptions-item label="充电次数">{{merchantOrderReport.chargeNum}}次</el-descriptions-item>
    <el-descriptions-item label="充电时长">{{merchantOrderReport.chargeTime}}分钟</el-descriptions-item>
    <el-descriptions-item label="电费金额">{{merchantOrderReport.electricityAmount}}元</el-descriptions-item>
    <el-descriptions-item label="服务费金额">{{merchantOrderReport.serviceAmount}}元</el-descriptions-item>
    <el-descriptions-item label="收入金额">{{merchantOrderReport.totalAmount}}元</el-descriptions-item>
    <el-descriptions-item label="交易金额">{{merchantOrderReport.tradeAmount}}元</el-descriptions-item>
    <el-descriptions-item label="交易手续费">{{merchantOrderReport.tradeFee}}</el-descriptions-item>
    <el-descriptions-item label="虚拟金额">{{merchantOrderReport.virtualAmount}}元</el-descriptions-item>
</el-descriptions>
        <h2>营收日报</h2>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            inline
            label-width="68px"
        >
            <el-form-item label="日期" prop="tradeDate">
                <el-date-picker
                    v-model="value"
                    style="width: 240px"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table @selection-change="handleSelectionChange" :data="reportList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="交易日期" align="center" prop="tradeDate" />
            <el-table-column label="站点名称" align="center" prop="stationName" />
            <el-table-column
                label="用电度数"
                align="center"
                prop="useElectricity"
            />
            <el-table-column label="充电次数" align="center" prop="chargeNum" />
            <el-table-column
                label="充电时长"
                align="center"
                prop="chargeTime"
            />
            <el-table-column
                label="电费金额"
                align="center"
                prop="electricityAmount"
            />
            <el-table-column
                label="服务费金额"
                align="center"
                prop="serviceAmount"
            />
            <el-table-column
                label="收入金额"
                align="center"
                prop="totalAmount"
            />
            <el-table-column
                label="虚拟金额"
                align="center"
                prop="virtualAmount"
            />
            <el-table-column
                label="交易金额"
                align="center"
                prop="tradeAmount"
            />
            <el-table-column
                label="交易手续费"
                align="center"
                prop="tradeFee"
            />
        </el-table>

        <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        /> -->
    </div>
</template>

<script>
import { getMerchantOrderReport } from "@/api/adapayMember/adapayMember";
export default {
    props: ["merchantId"],
    data() {
        return {
            value: "",
            reportList: [],
            merchantOrderReport: {},
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantId: null,
                stationId: null,
                stationName: null,
                useElectricity: null,
                chargeNum: null,
                chargeTime: null,
                electricityAmount: null,
                serviceAmount: null,
                totalAmount: null,
                virtualAmount: null,
                tradeDate: null,
                tradeAmount: null,
                tradeFee: null,
            },
        };
    },
    methods: {
        getList() {
            const params = {
                merchantId: this.merchantId,
                startTime: "",
                endTime: "",
            };
            getMerchantOrderReport(params).then(
                (response) => {
                    // console.log("查询报表", reportList, merchantOrderReport);
                    console.log('response',response)
                    this.reportList = response.data.reportList;
                    this.merchantOrderReport = response.data.merchantOrderReport;
                    console.log("查询报表", this.merchantOrderReport, this.reportList);
                }
            );
        },
        handleQuery() {
            console.log("this.value 日期", this.value);
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.value = null;
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleSelectionChange(selection) {
            console.log("selection", selection);
            // this.ids = selection.map(item => item.id)
            // this.single = selection.length!==1
            // this.multiple = !selection.length
        },
    },
    created() {
        this.getList();
    },
};
</script>

<style></style>