mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-07-05 22:47:59 +08:00
点击日期出现弹层
This commit is contained in:
admin-lmm
@@ -1,196 +1,264 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<h2>营收总报</h2>
|
<h2>营收总报</h2>
|
||||||
<el-card shadow="hover" style="margin-bottom:10px;padding:10px" >
|
<el-card shadow="hover" style="margin-bottom: 10px; padding: 10px">
|
||||||
<el-descriptions v-if="merchantOrderReport !== null">
|
<el-descriptions v-if="merchantOrderReport !== null">
|
||||||
<el-descriptions-item label="用电度数">{{merchantOrderReport.useElectricity}}度</el-descriptions-item>
|
<el-descriptions-item label="用电度数"
|
||||||
<el-descriptions-item label="充电次数">{{merchantOrderReport.chargeNum}}次</el-descriptions-item>
|
>{{ merchantOrderReport.useElectricity }}度</el-descriptions-item
|
||||||
<el-descriptions-item label="充电时长">{{merchantOrderReport.chargeTime}}分钟</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="收入金额">{{merchantOrderReport.totalAmount}}元</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.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-descriptions-item label="充电次数"
|
||||||
<el-date-picker
|
>{{ merchantOrderReport.chargeNum }}次</el-descriptions-item
|
||||||
v-model="createTimeRange"
|
>
|
||||||
style="width: 240px"
|
<el-descriptions-item label="充电时长"
|
||||||
value-format="yyyy-MM-dd"
|
>{{ merchantOrderReport.chargeTime }}分钟</el-descriptions-item
|
||||||
:default-time="['00:00:00', '23:59:59']"
|
>
|
||||||
type="daterange"
|
<el-descriptions-item label="收入金额"
|
||||||
range-separator="至"
|
>{{ merchantOrderReport.totalAmount }}元</el-descriptions-item
|
||||||
start-placeholder="开始日期"
|
>
|
||||||
end-placeholder="结束日期"
|
<el-descriptions-item label="电费金额"
|
||||||
:clearable="false"
|
>{{ merchantOrderReport.electricityAmount }}元</el-descriptions-item
|
||||||
></el-date-picker>
|
>
|
||||||
</el-form-item>
|
<el-descriptions-item label="服务费金额"
|
||||||
<el-form-item>
|
>{{ merchantOrderReport.serviceAmount }}元</el-descriptions-item
|
||||||
<el-button
|
>
|
||||||
type="primary"
|
<el-descriptions-item label="交易金额"
|
||||||
icon="el-icon-search"
|
>{{ merchantOrderReport.tradeAmount }}元</el-descriptions-item
|
||||||
size="mini"
|
>
|
||||||
@click="handleQuery"
|
<el-descriptions-item label="交易手续费"
|
||||||
>搜索</el-button
|
>{{ merchantOrderReport.tradeFee }}元</el-descriptions-item
|
||||||
>
|
>
|
||||||
<el-button
|
<el-descriptions-item label="虚拟金额"
|
||||||
icon="el-icon-refresh"
|
>{{ merchantOrderReport.virtualAmount }}元</el-descriptions-item
|
||||||
size="mini"
|
>
|
||||||
@click="resetQuery"
|
</el-descriptions>
|
||||||
>重置</el-button
|
<h3 v-else>暂无数据</h3>
|
||||||
>
|
</el-card>
|
||||||
</el-form-item>
|
<h2>营收日报</h2>
|
||||||
</el-form>
|
<el-form
|
||||||
<el-table :data="reportList">
|
:model="queryParams"
|
||||||
<el-table-column label="交易日期" align="center" prop="tradeDate" />
|
ref="queryForm"
|
||||||
<el-table-column label="站点名称" align="center" prop="stationName" >
|
size="small"
|
||||||
<template slot-scope="scope">
|
inline
|
||||||
<span class="link-type" @click="goStationOrder(scope)">{{ scope.row.stationName }}</span>
|
label-width="68px"
|
||||||
</template>
|
>
|
||||||
</el-table-column>
|
<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 :data="reportList">
|
||||||
|
<el-table-column label="交易日期" align="center" prop="tradeDate">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span class="link-type" @click="goTradeDate(scope)">{{
|
||||||
|
scope.row.tradeDate
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="站点名称" align="center" prop="stationName">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span class="link-type" @click="goStationOrder(scope)">{{
|
||||||
|
scope.row.stationName
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column
|
<el-table-column label="用电度数" align="center" prop="useElectricity" />
|
||||||
label="用电度数"
|
<el-table-column label="充电次数" align="center" prop="chargeNum" />
|
||||||
align="center"
|
<el-table-column label="充电时长" align="center" prop="chargeTime" />
|
||||||
prop="useElectricity"
|
<el-table-column
|
||||||
/>
|
label="电费金额"
|
||||||
<el-table-column label="充电次数" align="center" prop="chargeNum" />
|
align="center"
|
||||||
<el-table-column
|
prop="electricityAmount"
|
||||||
label="充电时长"
|
/>
|
||||||
align="center"
|
<el-table-column label="服务费金额" align="center" prop="serviceAmount" />
|
||||||
prop="chargeTime"
|
<el-table-column label="收入金额" align="center" prop="totalAmount" />
|
||||||
/>
|
<el-table-column label="虚拟金额" align="center" prop="virtualAmount" />
|
||||||
<el-table-column
|
<el-table-column label="交易金额" align="center" prop="tradeAmount" />
|
||||||
label="电费金额"
|
<el-table-column label="交易手续费" align="center" prop="tradeFee" />
|
||||||
align="center"
|
</el-table>
|
||||||
prop="electricityAmount"
|
<el-dialog title="订单流水" :visible.sync="dialogTableVisible">
|
||||||
/>
|
<span
|
||||||
<el-table-column
|
>站点id：{{ getOrderId }} --- 交易日期：{{ getOrderTradeDate }}</span
|
||||||
label="服务费金额"
|
>
|
||||||
align="center"
|
<el-table :data="getOrderList">
|
||||||
prop="serviceAmount"
|
<el-table-column
|
||||||
/>
|
property="date"
|
||||||
<el-table-column
|
label="日期"
|
||||||
label="收入金额"
|
width="150"
|
||||||
align="center"
|
></el-table-column>
|
||||||
prop="totalAmount"
|
<el-table-column
|
||||||
/>
|
property="name"
|
||||||
<el-table-column
|
label="姓名"
|
||||||
label="虚拟金额"
|
width="200"
|
||||||
align="center"
|
></el-table-column>
|
||||||
prop="virtualAmount"
|
<el-table-column property="address" label="地址"></el-table-column>
|
||||||
/>
|
</el-table>
|
||||||
<el-table-column
|
<pagination
|
||||||
label="交易金额"
|
v-show="getOrderParams.orderTotal > 0"
|
||||||
align="center"
|
:total="getOrderParams.orderTotal"
|
||||||
prop="tradeAmount"
|
:page.sync="getOrderParams.currentPage"
|
||||||
/>
|
:limit.sync="getOrderParams.pageSize"
|
||||||
<el-table-column
|
@pagination="getOrderList"
|
||||||
label="交易手续费"
|
/>
|
||||||
align="center"
|
|
||||||
prop="tradeFee"
|
|
||||||
/>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
<!-- <el-pagination
|
||||||
v-show="total > 0"
|
@size-change="handleSizeChange"
|
||||||
:total="total"
|
@current-change="handleCurrentChange"
|
||||||
:page.sync="queryParams.pageNum"
|
:current-page="getOrderParams.currentPage"
|
||||||
:limit.sync="queryParams.pageSize"
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
@pagination="getList"
|
:page-size="getOrderParams.pageSize"
|
||||||
/>
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
</div>
|
:total="getOrderList.length"
|
||||||
|
/> -->
|
||||||
|
</el-dialog>
|
||||||
|
<pagination
|
||||||
|
v-show="total > 0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getMerchantOrderReport } from "@/api/adapayMember/adapayMember";
|
import { getMerchantOrderReport } from "@/api/adapayMember/adapayMember";
|
||||||
import { getDay } from "@/utils/common";
|
import { getDay } from "@/utils/common";
|
||||||
export default {
|
export default {
|
||||||
props: ["merchantId"],
|
props: ["merchantId"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
createTimeRange: [],
|
getOrderId: null,
|
||||||
reportList: [],
|
getOrderTradeDate: null,
|
||||||
merchantOrderReport: {},
|
getOrderParams: {
|
||||||
total:0,
|
currentPage: 1,
|
||||||
queryParams: {
|
pageSize: 10,
|
||||||
pageNum: 1,
|
orderTotal: 2,
|
||||||
pageSize: 10,
|
},
|
||||||
merchantId: this.merchantId,
|
getOrderList: [
|
||||||
startTime:'',
|
{
|
||||||
endTime:''
|
date: "2016-05-02",
|
||||||
},
|
name: "王小虎",
|
||||||
};
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-04",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-01",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "王小虎",
|
||||||
|
address: "上海市普陀区金沙江路 1518 弄",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dialogTableVisible: false,
|
||||||
|
createTimeRange: [],
|
||||||
|
reportList: [],
|
||||||
|
merchantOrderReport: {},
|
||||||
|
total: 0,
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
merchantId: this.merchantId,
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.getOrderParams.pageSize = val;
|
||||||
},
|
},
|
||||||
methods: {
|
handleCurrentChange() {
|
||||||
getList() {
|
this.getOrderParams.currentPage = 1;
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
goStationOrder(scope) {
|
|
||||||
this.$router.push({
|
|
||||||
name: 'stationDetail',
|
|
||||||
params: {
|
|
||||||
id: scope.row.stationId,
|
|
||||||
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();
|
|
||||||
},
|
|
||||||
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() {
|
goTradeDate(scope) {
|
||||||
await this.defaultDate()
|
this.dialogTableVisible = true;
|
||||||
this.getList();
|
// console.log("点击日期出现弹层", scope.row.tradeDate);
|
||||||
|
this.getOrderId = scope.row.id;
|
||||||
|
this.getOrderTradeDate = scope.row.tradeDate;
|
||||||
},
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goStationOrder(scope) {
|
||||||
|
this.$router.push({
|
||||||
|
name: "stationDetail",
|
||||||
|
params: {
|
||||||
|
id: scope.row.stationId,
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user