<template>
|
<el-dialog title="实时交易汇总"
|
width="80%"
|
ref="dialog"
|
id="real"
|
@close="close"
|
:visible.sync="dialogVisible">
|
<div class="clearfix">
|
<div class="title">
|
<span>支付公司: {{viewData.payCompany}}</span>
|
<span>商户号: {{searchData.merId}}</span>
|
<span>交易: {{enumerMap(searchData.transType,"transType")}}</span>
|
</div>
|
<el-form :inline="true"
|
:model="searchData"
|
class="form-inline">
|
<el-form-item label="支付通道">
|
<el-select v-model="searchData.merId"
|
placeholder="请选择"
|
@change="merIdSelect"
|
clearable>
|
<el-option v-for="item in merIdList"
|
:key="item.merId"
|
:label="item.payCompany + item.merId"
|
:value="item.merId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="交易类型">
|
<el-select v-model="searchData.transType"
|
placeholder="请选择"
|
clearable>
|
<el-option v-for="item in transTypeList"
|
:key="item.id"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="search">
|
<el-button @click="search" type="primary">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table">
|
<ul>
|
<li>
|
<span>申请笔数</span>
|
<span>{{tableData.applyCount}}</span>
|
</li>
|
<li>
|
<span>成功笔数</span>
|
<span>{{tableData.sucCount}}</span>
|
</li>
|
<li>
|
<span>失败笔数</span>
|
<span>{{tableData.failCount}}</span>
|
</li>
|
<li>
|
<span>处理中笔数</span>
|
<span>{{tableData.procCount}}</span>
|
</li>
|
<li>
|
<span>成功率</span>
|
<span>{{tableData.sucRate + "%"}}</span>
|
</li>
|
</ul>
|
<ul>
|
<li>
|
<span>申请金额</span>
|
<span>{{tableData.applyAmount}}</span>
|
</li>
|
<li>
|
<span>成功金额</span>
|
<span>{{tableData.sucAmount}}</span>
|
</li>
|
<li>
|
<span>失败金额</span>
|
<span>{{tableData.failAmount}}</span>
|
</li>
|
<li>
|
<span>处理中金额</span>
|
<span>{{tableData.procAmount}}</span>
|
</li>
|
<li>
|
<span>失败率</span>
|
<span>{{tableData.failRate + "%"}}</span>
|
</li>
|
</ul>
|
</div>
|
<p style="float: right;padding: 10px 0px;">下一次刷新 {{time}} 秒</p>
|
</div>
|
|
</el-dialog>
|
</template>
|
|
<script>
|
import { staticTotal, staticMerId } from "@/assets/api/api";
|
export default {
|
name: "realTotal",
|
|
props: {
|
value: {
|
type: String,
|
default: ""
|
},
|
|
info: {
|
type: Object,
|
default() {
|
return {};
|
}
|
},
|
companyList: {
|
type: Array,
|
default() {
|
return [];
|
}
|
}
|
},
|
|
watch: {
|
async value(n) {
|
this.dialogVisible = n === "real" ? true : false;
|
if (this.dialogVisible) {
|
let merIdList = await staticMerId();
|
this.merIdList = merIdList.data.retBody;
|
this.searchData.merId = this.merIdList[0].merId;
|
this.searchData.companyId = this.merIdList[0].companyId;
|
this.searchData.transType = this.transTypeList[0].id;
|
this.viewData.payCompany = this.merIdList[0].payCompany;
|
this.pollingData();
|
this.getData();
|
}
|
}
|
},
|
|
data() {
|
return {
|
dialogVisible: false,
|
tableData: {},
|
merIdList: [],
|
timerId: null,
|
searchData: {
|
companyId: null,
|
institutionId: null,
|
merId: null,
|
transType: null
|
},
|
time: 3,
|
viewData: {
|
payCompany: null
|
},
|
searchData: {
|
companyId: null,
|
institutionId: null,
|
merId: null,
|
transType: null
|
},
|
transTypeList: [
|
{ value: "二要素", id: "105" },
|
{ value: "三要素", id: "101" },
|
{ value: "四要素", id: "102" },
|
{ value: "四要素+短信", id: "103" },
|
{ value: "五要素+签约", id: "104" },
|
{ value: "单笔代扣", id: "301" },
|
{ value: "批量代扣", id: "302" },
|
{ value: "单笔代付", id: "201" },
|
{ value: "批量代付", id: "202" },
|
{ value: "协议代扣", id: "303" }
|
]
|
};
|
},
|
|
methods: {
|
// 关闭
|
close() {
|
clearInterval(this.timerId);
|
this.time = 3;
|
this.$emit("input", "");
|
},
|
|
// 查询
|
search() {
|
clearInterval(this.timerId)
|
this.time = 3
|
this.getData()
|
this.pollingData()
|
},
|
|
// 轮询
|
pollingData() {
|
this.timerId = setInterval(() => {
|
if (this.time == 0) {
|
this.time = 3;
|
clearInterval(this.timerId);
|
this.getData()
|
this.pollingData();
|
} else {
|
this.time--;
|
}
|
}, 1000);
|
},
|
|
// 获取数据
|
async getData() {
|
let res = await staticTotal(this.searchData);
|
this.tableData = res.data.retBody;
|
},
|
|
// 选择merId
|
merIdSelect(val) {
|
let list = this.merIdList.filter(item => {
|
return item.merId === val;
|
})[0];
|
this.searchData.companyId = list.companyId;
|
this.viewData.payCompany = list.payCompany;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
#real {
|
.title {
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
> span {
|
line-height: 36px;
|
height: 36px;
|
}
|
}
|
.table {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
margin-top: 20px;
|
> ul {
|
flex: 1;
|
list-style: none;
|
padding: 0px;
|
margin: 0px;
|
> li {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
> span {
|
flex: 1;
|
line-height: 48px;
|
height: 48px;
|
text-align: center;
|
border-bottom: 1px solid #dcdfe6;
|
border-right: 1px solid #dcdfe6;
|
}
|
}
|
> li:last-child {
|
> span {
|
border-bottom: none;
|
border-right: none;
|
}
|
> span:first-child {
|
border-right: 1px solid #dcdfe6;
|
}
|
}
|
}
|
> ul:first-child {
|
> li:last-child {
|
> span:last-child {
|
border-right: 1px solid #dcdfe6;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
