<template>
|
<div class="static">
|
<el-form :inline="true"
|
:model="searchData"
|
class="form-inline">
|
<el-form-item label="开始日期">
|
<el-date-picker v-model="searchData.beginDate"
|
type="date"
|
placeholder="选择日期"
|
format="yyyy - MM - dd "
|
value-format="yyyy-MM-dd"
|
style="width: 197px;">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束日期">
|
<el-date-picker v-model="searchData.endDate"
|
type="date"
|
placeholder="选择日期"
|
format="yyyy - MM - dd "
|
value-format="yyyy-MM-dd"
|
style="width: 197px;">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="交易类型">
|
<el-select v-model="searchData.transType"
|
placeholder="请选择"
|
clearable>
|
<el-option v-for="item in typeList"
|
:key="item.id"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="search">
|
<el-button @click="getTableData"
|
type="primary">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="add">
|
<el-button @click="total">实时交易汇总</el-button>
|
<el-button @click="print">EXCEL导出</el-button>
|
</div>
|
<el-table :data="tableData.list"
|
v-loading="loading"
|
border
|
class="table">
|
<el-table-column prop="transDate"
|
align="center"
|
min-width="120"
|
label="交易日期">
|
</el-table-column>
|
<el-table-column prop="institutionId"
|
align="center"
|
min-width="140"
|
label="接入机构">
|
<template slot-scope="scope">
|
<span>{{enumerMap(scope.row.institutionId,'institution')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="companyId"
|
align="center"
|
min-width="160"
|
label="支付公司">
|
<template slot-scope="scope">
|
<span>{{transCompany(scope.row.companyId)}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="merId"
|
align="center"
|
min-width="180"
|
label="商户号">
|
</el-table-column>
|
<el-table-column prop="transType"
|
align="center"
|
min-width="120"
|
label="交易名称">
|
<template slot-scope="scope">
|
<span>{{enumerMap(scope.row.transType,'transType')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="applyCount"
|
align="center"
|
min-width="100"
|
label="申请笔数">
|
</el-table-column>
|
<el-table-column prop="applyAmount"
|
align="center"
|
min-width="160"
|
label="申请金额">
|
</el-table-column>
|
<el-table-column prop="sucCount"
|
align="center"
|
min-width="100"
|
label="成功笔数">
|
</el-table-column>
|
<el-table-column prop="sucAmount"
|
align="center"
|
min-width="160"
|
label="成功金额">
|
</el-table-column>
|
<el-table-column prop="failCount"
|
align="center"
|
min-width="100"
|
label="失败笔数">
|
</el-table-column>
|
<el-table-column prop="failAmount"
|
align="center"
|
min-width="160"
|
label="失败金额">
|
</el-table-column>
|
<el-table-column prop="sucRate"
|
align="center"
|
min-width="80"
|
label="成功率">
|
<template slot-scope="scope">
|
<span>{{ scope.row.sucRate + "%" }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="failRate"
|
align="center"
|
min-width="80"
|
label="失败率">
|
<template slot-scope="scope">
|
<span>{{scope.row.failRate + "%"}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column align="center"
|
min-width="120"
|
fixed="right"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button size="mini"
|
@click="analysis(scope.row.statisticNo,scope.row)">失败分析</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination @current-change="handleCurrentChange"
|
layout="total,prev, pager, next, jumper"
|
background
|
style="margin-top: 10px;"
|
:total.sync="tableData.totalSize">
|
</el-pagination>
|
<analysis v-model="mask"
|
:statisticNo="id"
|
:payCompany="company"
|
:info="maskInfo"></analysis>
|
<real-total v-model="mask"
|
:companyList="companyList"></real-total>
|
</div>
|
</template>
|
|
|
<script>
|
import {
|
StaticData,
|
staticAnaly,
|
getCompanyId,
|
staticTotal,
|
staticPrint
|
} from "@/assets/api/api";
|
import Analysis from "./Analysis";
|
import realTotal from "./RealTotal";
|
|
export default {
|
name: "static",
|
|
data() {
|
return {
|
searchData: {
|
beginDate: null,
|
endDate: null,
|
transType: null,
|
page: 1,
|
pageSize: 10
|
},
|
|
tableData: {},
|
maskInfo: {},
|
mask: "",
|
loading: false,
|
companyList: [],
|
company: "",
|
id: null,
|
|
typeList: [
|
{
|
value: "鉴权",
|
id: 100
|
},
|
{
|
value: "代扣",
|
id: 300
|
},
|
{
|
value: "代付",
|
id: 200
|
}
|
]
|
};
|
},
|
|
created() {
|
getCompanyId().then(res => {
|
this.companyList = res.data;
|
this.getTableData();
|
});
|
},
|
|
components: {
|
Analysis,
|
realTotal
|
},
|
|
methods: {
|
// 获取表单
|
async getTableData() {
|
this.loading = true
|
let res = await StaticData(this.searchData);
|
if (res.data.retHeader.retCode === "0000") {
|
this.tableData = res.data.retBody ? res.data.retBody : { totalSize: 0, list: [] };
|
} else {
|
this.tableData = { totalSize: 0, list: [] }
|
}
|
this.loading = false
|
},
|
|
// 新增
|
add() { },
|
|
// 重置
|
reset() {
|
this.searchData = {
|
beginDate: null,
|
endDate: null,
|
transType: null,
|
page: 1,
|
pageSize: 10
|
};
|
this.getTableData()
|
},
|
|
// 汇总分析
|
async total() {
|
this.mask = "real";
|
},
|
|
// 导出
|
async print() {
|
staticPrint(this.searchData)
|
},
|
|
// 公司翻译
|
transCompany(id) {
|
let list = this.companyList.filter(item => {
|
return item.companyId === id;
|
})[0];
|
|
this.company = list["payCompany"];
|
return list["payCompany"];
|
},
|
|
// 分页
|
handleCurrentChange(val) {
|
this.searchData.page = val
|
this.getTableData()
|
},
|
|
// 分析
|
async analysis(id, params) {
|
let list = this.companyList.filter(item => {
|
return item.companyId === params.companyId;
|
})[0];
|
|
this.company = list["payCompany"];
|
this.mask = "analysis";
|
this.id = id;
|
this.maskInfo = params;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.add {
|
margin: 20px 0px;
|
}
|
</style>
|
