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

<template>
    <div class="app-container">
         <h2>营收总报</h2>
     <el-card shadow="hover" style="margin-bottom:10px;padding:10px" >
        <el-descriptions v-if="merchantOrderReport !== null">
    <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>
        <h3 v-else>暂无数据</h3>
     </el-card>
        <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="createTimeRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    :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" >
<!--                <template slot-scope="scope">-->

<!--                    <span class="link-type" @click="goStationOrderReport(scope)">{{ scope.row.stationName }}</span>-->
<!--                </template>-->
            </el-table-column>

            <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";
import { getDay } from "@/utils/common";
export default {
    props: ["merchantId"],
    data() {
        return {
            createTimeRange: [],
            reportList: [],
            merchantOrderReport: {},
            total:0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantId: this.merchantId,
                startTime:'',
                endTime:''
            },
        };
    },
    methods: {
        getList() {
            console.log('queryParams',this.queryParams)
            getMerchantOrderReport(this.queryParams).then(
                (response) => {
                    // console.log("查询报表", reportList, merchantOrderReport);
                    console.log('getMerchantOrderReport',response)
                   if(response.data){
                     this.reportList = response.data.pageResponse.list;
                    this.merchantOrderReport = response.data.merchantOrderReport;
                    this.total = response.data.pageResponse.total
                   } else{
                    this.reportList =[]
                    this.merchantOrderReport= null
                   }
                }
            );
        },
        goStationOrderReport(scope) {
            this.$router.push({
                path: 'station/orderReport',
                name: 'Report',
                params: {
                    id: scope.row.id,
                    stationName: scope.row.stationName,
                }
            });
        },
        handleQuery() {
            let arr = this.createTimeRange[0]
            let str = this.createTimeRange[1]
            this.queryParams.startTime = arr
            this.queryParams.endTime = str
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.createTimeRange = []
             this.queryParams.startTime = ''
            this.queryParams.endTime =''
            this.resetForm("queryForm");
             this.getList();
        },
        handleSelectionChange(selection) {
            console.log("selection", selection);
            // this.ids = selection.map(item => item.id)
            // this.single = selection.length!==1
            // this.multiple = !selection.length
        },
          defaultDate() {
            //字符串拼接，开始时间，结束时间
            let beg = getDay(-7); //当月第一天
            let end = getDay(0); //当天
            this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
            // return this.createTimeRange;
            this.queryParams.startTime = beg
            this.queryParams.endTime = end
        },

    },
    async created() {
        await this.defaultDate()
        this.getList();
    },
};
</script>

<style></style>