Commit 03cc210b authored by wxk's avatar wxk

新增币种充提统计页

parent 1c4a69e3
......@@ -17,9 +17,12 @@
<el-menu-item index="BTY">BTY</el-menu-item>
<el-menu-item index="YCC">YCC</el-menu-item>
</el-submenu>
<el-menu-item index="account">
<el-menu-item index="/monitor/account">
<span slot="title">银行账户</span>
</el-menu-item>
<el-menu-item index="/monitor/coinRecharge">
<span slot="title">币种充提统计</span>
</el-menu-item>
</el-menu>
</div>
</template>
......@@ -34,22 +37,22 @@
}
},
created() {
this.active = this.$route.params.name || 'account';
this.active = this.$route.params.name || this.$route.path;
},
methods: {
navClick(index) {
this.active = index;
if(index != 'account'){
if(index != '/monitor/account' && index != '/monitor/coinRecharge'){
this.$router.push(`/monitor/${index}`);
Bus.$emit('refresh');
}else{
this.$router.push('/monitor/account');
}else {
this.$router.push(index);
}
}
},
watch: {
$route() {
this.active = this.$route.params.name || 'account';
this.active = this.$route.params.name || this.$route.path;
},
},
}
......
......@@ -15,6 +15,8 @@ const Api = {
Records: originUrl + "/records", //充提记录
Ticket: originUrl + '/ticket', //查询交易对行情
Excle: originUrl + '/recordsExcle',//导出充提记录
GetCountCoin: originUrl + '/countCoin',//币种充提统计查询
countCoinExcle: originUrl + '/countCoinExcle',//币种充提统计导出
}
export default Api;
......@@ -24,37 +24,40 @@ export default new Router({
children:
[
{
path: '/monitor/account',
component: function(resolve){
require(['../views/account.vue'],resolve);
},
path: '/monitor/account',
component: function(resolve){
require(['../views/account.vue'],resolve);
},
{
path:"/monitor/:name",
component: function(resolve){
require(['../views/RobotContainer.vue'],resolve);
},
children: [
{
path: '/',
component: function(resolve){
require(['../views/overview.vue'],resolve);
},
},{
path: '/monitor/coinRecharge',
component: function(resolve){
require(['../views/coinRecharge.vue'],resolve);
},
},{
path:"/monitor/:name",
component: function(resolve){
require(['../views/RobotContainer.vue'],resolve);
},
children: [
{
path: '/',
component: function(resolve){
require(['../views/overview.vue'],resolve);
},
{
path: 'RobotDetail',
component: function(resolve){
require(['../views/RobotDetails.vue'],resolve);
},
},
{
path: 'RobotDetail',
component: function(resolve){
require(['../views/RobotDetails.vue'],resolve);
},
]
},
{
path: 'account',
redirect:'/monitor/account',
}
]
}
]
},
{
path: '*',
redirect:'/monitor/account',
}
]
})
......@@ -793,9 +793,11 @@
//交易记录分页
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.getTransaction();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getTransaction({page: val + ''});
},
/*充提记录筛选*/
......@@ -839,6 +841,7 @@
//分页
handleSizeChange1(val) {
this.pageSize1 = val;
this.currentPage1 = 1;
this.getRecords();
},
handleCurrentChange1(val) {
......
......@@ -431,9 +431,11 @@
//分页
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.getRecords();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getRecords(val+'');
},
},
......
<template>
<div class="coin-recharge-box">
<div class="record-box" v-loading="Loading" element-loading-text="正在刷新数据">
<div class="title-box clearfix">
<span class="title">币种充提统计</span>
<div class="select-bar fr clearfix">
<div class="fl select">
<el-select v-model="checkedWeb" clearable placeholder="交易所筛选">
<el-option
v-for="item in webs"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
<div class="select-bar-content fl" :class="{'unfold' : !foldExchange0}">
<span class="title">币种</span>
<div class="fr">
<span class="ellipsis" v-show="currencies.length>3 && foldExchange0">...</span>
<span class="amount">{{checkedCurrencies.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange0, 'el-icon-caret-bottom' : !foldExchange0}"
v-show="currencies.length>3"
@click="clickFoldExchange('currency')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate0" v-model="checkAll0" @change="handleCheckAllChange0">全部</el-checkbox-button>
<el-checkbox-group v-model="checkedCurrencies" @change="handleCheckedChange0">
<el-checkbox-button v-for="currency in currencies" :label="currency" :key="currency">{{currency}}</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
<el-date-picker
@change="dateChange"
class="fr"
v-model="transactionTime"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="count-box">
<div class="fl">
<el-button type="primary" @click="exportExcel" size="mini">导出当前页</el-button>
<el-button type="primary" @click="exportExcel('all')" size="mini">导出所有</el-button>
</div>
<!--隐藏的下载表格按钮-->
<a id="download" href="" target="blank" hidden download></a>
</div>
<el-table
v-loading="Loading"
:data="coinRechargeList"
stripe
style="width: 100%">
<el-table-column
label="币种">
<template slot-scope="scope">
<i class="iconfont" :class=" 'icon-'+scope.row.coin+'3'"></i>
<span>{{ scope.row.coin }}</span>
</template>
</el-table-column>
<el-table-column
label="日计">
<template slot-scope="scope">
<span>{{ scope.row.opt_amount }}</span>
</template>
</el-table-column>
<el-table-column
label="累计充值">
<template slot-scope="scope">
<span>{{ scope.row.absolute_amount }}</span>
</template>
</el-table-column>
<el-table-column
label="日期">
<template slot-scope="scope">
<span>{{ scope.row.date_time }}</span>
</template>
</el-table-column>
<el-table-column
label="交易所">
<template slot-scope="scope">
<span>{{ scope.row.platform }}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
layout="total, prev, pager, next, sizes"
:total="listCount">
</el-pagination>
</div>
</div>
</template>
<script>
import axios from 'axios';
import ApiConfig from "../config/api-config";
export default {
data() {
return {
coinRechargeList: [],
listCount: 0,
Loading: false,
checkedWeb: '',
webs: [],
checkAll0: false, //币种筛选
checkedCurrencies: [],
allCurrencies: [],//所有币种
currencies: [],//符合交易所条件的所有币种
isIndeterminate0: true,
foldExchange0: true,
transactionTime: '',
pageSize: 10,
currentPage: 1,
}
},
created() {
this.webs = this.webs.length === 0 && sessionStorage.getItem('webs') ? JSON.parse(sessionStorage.getItem('webs')) : this.webs;
this.currencies = this.currencies.length === 0 && sessionStorage.getItem('currencies') ? JSON.parse(sessionStorage.getItem('currencies')) : this.currencies;
this.getRechargeList();
},
watch: {
checkedWeb() {
this.getRechargeList();
},
},
methods: {
clickFoldExchange(type) {
switch (type) {
case 'web':
this.foldExchange = !this.foldExchange;
break;
case 'currency':
this.foldExchange0 = !this.foldExchange0;
break;
default:
break
}
},
//币种充提统计查询
getRechargeList(page) {
const params = {
"page": page || "1",
"size": this.pageSize+'',
"platform": this.checkedWeb, //交易所 可选参数,如果未空默认所有
"coin": this.checkedCurrencies, //币种 可选参数,如果为空默认所有
"min_date_time": this.transactionTime ? this.transactionTime[0] : '', //可选参数
"max_date_time": this.transactionTime ? this.transactionTime[1] : '', //可选参数 如果为空会默认当前日期
}
axios.post(ApiConfig.GetCountCoin, params).then( res => {
this.coinRechargeList = res.data.data.list;
this.listCount = res.data.data.count;
})
},
//币种过滤
handleCheckAllChange0(val) {
this.checkedCurrencies = val ? this.currencies : [];
this.isIndeterminate0 = false;
this.getRechargeList();
},
handleCheckedChange0(value) {
let checkedCount = value.length;
this.checkAll0 = checkedCount === this.currencies.length;
this.isIndeterminate0 = checkedCount > 0 && checkedCount < this.currencies.length;
this.getRechargeList();
},
//日期过滤
dateChange() {
this.getRechargeList();
},
//分页
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.getRechargeList();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getRechargeList(val+'');
},
//'='拼接key和value
toQueryPair(key, value) {
if (typeof value == 'undefined') {
console.log(key)
return;
}
return key + '=' + (value === null ? '' : String(value));
},
//'&'拼接,数组将value转换成','连接的string
toQueryString(obj) {
var ret = [];
for (var key in obj) {
var values = obj[key];
// key = encodeURIComponent(key);
if (values && values.constructor == Array) {//数组
var queryValues = values.join(',');
ret.push(this.toQueryPair(key, queryValues));
} else { //字符串
ret.push(this.toQueryPair(key, values));
}
}
return ret.join('&');
},
//导出
exportExcel(type) {
let params = {
"platform": this.checkedWeb, //交易所 可选参数,如果未空默认所有
"coin": this.checkedCurrencies, //币种 可选参数,如果为空默认所有
"min_date_time": this.transactionTime ? this.transactionTime[0] : '', //可选参数
"max_date_time": this.transactionTime ? this.transactionTime[1] : '', //可选参数 如果为空会默认当前日期
}
if (type !== 'all') {
Object.assign(params, {
page: this.currentPage,
size: this.pageSize,
})
}
let downloadHref = document.getElementById('download');
const href = ApiConfig.countCoinExcle + '?' + this.toQueryString(params);
downloadHref.setAttribute('href', href);
// console.log(href);
downloadHref.click();
}
},
}
</script>
<style scoped>
.coin-recharge-box {
padding: 0 20px;
}
.record-box {
background: rgba(255, 255, 255, 1);
border-radius: 4px;
border: 1px solid rgba(119, 146, 167, 1);
padding: 20px;
margin: 20px 0 20px 0;
}
.title-box {
& > .title {
display: inline-block;
margin-bottom: 20px;
line-height: 40px;
font-size: 18px;
color: rgba(51, 51, 51, 1);
}
}
.select-bar-content {
float: left;
margin-left: 10px;
width: 410px;
padding: 8px 10px 0 65px;
background-color: #fff;
border-radius:4px;
border:1px solid rgba(224,224,224,1);
z-index: 100;
height: 40px;
overflow: hidden;
.amount {
line-height: 26px;
}
.ellipsis {
position: relative;
top: -3px;
left: -13px;
}
&.unfold {
height: auto;
}
.title {
display: inline-block;
width: 65px;
text-align: center;
position: relative;
left: -65px;
}
.fold-button {
cursor: pointer;
line-height: 26px;
color: rgba(192,212,218,1);
}
}
.select {
margin-left: 10px;
}
</style>
<style>
/*select组件样式覆盖*/
.coin-recharge-box {
.count-box .el-button {
background: rgba(119, 146, 167, 1);
border: none;
}
.select-bar-content {
.el-checkbox-button:last-child .el-checkbox-button__inner, .el-checkbox-button:first-child .el-checkbox-button__inner {
border-radius: 3px;
}
&.pair {
.el-checkbox-button__inner{
width: 85px;
}
.el-checkbox-group .el-checkbox-button:first-child {
margin-left: 90px;
}
}
.el-checkbox-button__inner {
padding: 5px 0;
width: 58px;
text-align: center;
background-color: #C3D3DF;
border-color: #C3D3DF;
box-shadow: none;
color: #fff;
border-radius: 3px;
font-size: 12px;
}
.el-checkbox-button {
margin: 0 10px 10px 0;
border-radius: 3px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #7792A7;
border-color: #7792A7;
}
.el-checkbox-button.is-focus .el-checkbox-button__inner {
border-color: #dcdfe6;
}
&>.el-checkbox-button {
margin-left: -69px;
}
.el-checkbox-group {
margin-top: -34px;
.el-checkbox-button:first-child {
margin-left: 70px;
}
}
}
}
</style>
......@@ -742,7 +742,7 @@
/*select组件样式覆盖*/
.overview {
.select-bar-content {
padding: 2px 0 0 65px;
/*padding: 2px 0 0 65px;*/
.el-checkbox-button:last-child .el-checkbox-button__inner, .el-checkbox-button:first-child .el-checkbox-button__inner {
border-radius: 3px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment