436 lines
14 KiB
Vue
436 lines
14 KiB
Vue
|
<template>
|
||
|
|
<NavBar v-if="showNav" />
|
||
|
|
<view class="container">
|
||
|
|
<view class="filter">
|
||
|
|
<uni-datetime-picker ref="timeRange" class="time" type="daterange" v-model="timeRange"
|
||
|
|
@change="handleDaterangeChange" />
|
||
|
|
<view class="right-class" @click="showUserModal">
|
||
|
|
<image src="/static/home/hierarchy.svg" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="checkBtn" v-if="ifOrg" @click="switchData(true)"><image src="/static/check.svg" style="width: 17px;height: 14px;margin-right: 10px;" ></image>{{ $t('home.switchToPersonalPerformance') }}</view>
|
||
|
|
<view class="checkBtn" v-else @click="switchData(false)"><image src="/static/check.svg" style="width: 17px;height: 14px;margin-right: 10px;" ></image>{{ $t('home.switchToTeamPerformance') }}</view>
|
||
|
|
<view class="collect">
|
||
|
|
<view class="title">
|
||
|
|
<!-- <image src="/static/titleIcon.svg" class="title-bg" ></image>-->
|
||
|
|
<view class="title-bg">
|
||
|
|
<image src="/static/dthz.svg" mode="aspectFit"
|
||
|
|
style="width: 32upx;height: 32upx;margin-left: 20rpx"></image>
|
||
|
|
<text style="margin-left: 12rpx;">{{ $t('home.dynamicSummary') }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="noBg"></view>
|
||
|
|
</view>
|
||
|
|
<view class="charts-box">
|
||
|
|
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData">
|
||
|
|
</qiun-data-charts>
|
||
|
|
</view>
|
||
|
|
<view style="padding-top: 20px;">
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/registerIcon.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-top: 2px"></image>
|
||
|
|
<text>{{ $t('home.registeredNumberOfUsers') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ registeredNumberOfUsers }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/goldInNum.svg" mode="aspectFit" style="width: 16px;height: 16px">
|
||
|
|
</image>
|
||
|
|
<text>{{ $t('home.numberOfDepositAccounts') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ goldInUserNum }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/tradeUserNum.svg" mode="aspectFit" style="width: 16px;height: 16px">
|
||
|
|
</image>
|
||
|
|
<text>{{ $t('home.transactionNumberOfUsers') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ tradeUserNum }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/goldInIcon.svg" mode="aspectFit" style="width: 16px;height: 16px">
|
||
|
|
</image>
|
||
|
|
<text>{{ $t('home.depositAmount') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ '$' + depositAmount }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/goldOutIcon.svg" mode="aspectFit" style="width: 16px;height: 16px">
|
||
|
|
</image>
|
||
|
|
<text>{{ $t('home.withdrawalAmount') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ withdrawalAmount }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/fundIcon.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-top: 2px"></image>
|
||
|
|
<text>{{ $t('home.agencyCommission') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ '$' + agencyCommission }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/fundOutIcon.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-top: 2px"></image>
|
||
|
|
<text>{{ $t('home.commissionWithdrawal') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ commissionWithdrawal }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/tradingIcon.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-top: 2px"></image>
|
||
|
|
<text>{{ $t('home.lotVolume') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ lotVolume }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="item-value">
|
||
|
|
<view class="item-left">
|
||
|
|
<image src="/static/home/profitIcon.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-top: 2px"></image>
|
||
|
|
<text>{{ $t('home.tradingProfitAndLoss') }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="item-right">
|
||
|
|
{{ '$' + tradingProfitAndLoss }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="customer-status">
|
||
|
|
<view class="title">
|
||
|
|
<!-- <image src="/static/titleIcon.svg" class="title-bg" ></image>-->
|
||
|
|
<view class="title-bg">
|
||
|
|
<image src="/static/home/customerStatus.svg" mode="aspectFit"
|
||
|
|
style="width: 16px;height: 16px;margin-left: 10px"></image>
|
||
|
|
<text style="margin-left: 12rpx;">{{ $t('home.customerStatus') }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="noBg"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="customer-status-top">
|
||
|
|
<view class="item-box" style="background: rgba(255, 248, 240, 1);">
|
||
|
|
<image class="bg-icon" src="/static/home/waitGoldIn.svg" mode="aspectFit"></image>
|
||
|
|
<view class="item-top">
|
||
|
|
<text class="item-title">{{ $t('home.waitingDeposit') }}</text>
|
||
|
|
<text class="item-num">{{ waitingDeposit }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-btn" @click="skipSell(2)">{{ $t('home.goAndCheck') }}
|
||
|
|
<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item-box" style="background: rgba(67, 207, 124, 0.06);">
|
||
|
|
<image class="bg-icon" src="/static/home/transformIcon.svg" mode="aspectFit"></image>
|
||
|
|
<view class="item-top">
|
||
|
|
<text class="item-title">{{ $t('home.secondaryTransformation') }}</text>
|
||
|
|
<text class="item-num">{{ secondaryTransformation }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-btn" @click="skipSell(1)">{{ $t('home.goAndCheck') }}
|
||
|
|
<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item-box" style="background: rgba(247, 244, 254, 1);">
|
||
|
|
<image class="bg-icon" src="/static/home/followUpIcon.svg" mode="aspectFit"></image>
|
||
|
|
<view class="item-top">
|
||
|
|
<text class="item-title">{{ $t('home.followUpContinuously') }}</text>
|
||
|
|
<text class="item-num">{{ followUpContinuously }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-btn" @click="skipSell(4)">{{ $t('home.goAndCheck') }}
|
||
|
|
<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="customer-status-bottom">
|
||
|
|
<view class="item-box" style="background: rgba(242, 248, 254, 1);">
|
||
|
|
<image class="bg-icon" src="/static/home/contactIcon.svg" mode="aspectFit"></image>
|
||
|
|
<view class="item-top">
|
||
|
|
<text class="item-title">{{ $t('home.noContact') }}</text>
|
||
|
|
<text class="item-num">{{ noContact }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-btn" @click="skipSell(0)">{{ $t('home.goAndCheck') }}
|
||
|
|
<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item-box" style="background: rgba(247, 248, 250, 1);">
|
||
|
|
<image class="bg-icon" src="/static/home/noIntentionIcon.svg" mode="aspectFit"></image>
|
||
|
|
<view class="item-top">
|
||
|
|
<text class="item-title">{{ $t('home.unintentionalDirection') }}</text>
|
||
|
|
<text class="item-num">{{ unintentionalDirection }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="item-btn" @click="skipSell(5)">{{ $t('home.goAndCheck') }}
|
||
|
|
<image src="/static/home/checkIcon.svg" mode="aspectFit" style="width: 22rpx;height: 36rpx">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<uni-popup ref="popup" background-color="#fff" type="bottom">
|
||
|
|
<view class="popupView">
|
||
|
|
<view class="query-view">
|
||
|
|
<input class="searchInput" v-model="qcc_fuzzy_search" :placeholder="$t('home.customer.sellPage.name')">
|
||
|
|
<button class="btn primaryButton" @click="getSubordinate">
|
||
|
|
<image src="/static/search.svg" mode="aspectFit" style="width: 14px;height: 14px"></image>
|
||
|
|
<text class="filterText">{{ $t('form.search') }}</text>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<view class="user-box">
|
||
|
|
<view class="user-item" :class="{' user-active ' : power_id == user.id}" v-for="user in subordinateList" @click="activeUser(user.id)">
|
||
|
|
{{ user.name }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="operateBox">
|
||
|
|
<button class="btn secondaryButton" @click="this.$refs.popup.close()">
|
||
|
|
{{ $t('common.cancelText') }}
|
||
|
|
</button>
|
||
|
|
<button class="btn primaryButton" @click="switchUserData">
|
||
|
|
{{ $t('common.okText') }}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getPhaseSummaryOne,
|
||
|
|
getPhaseSummaryTwo,
|
||
|
|
getPhaseSummaryThree,
|
||
|
|
statSaleLeadData,
|
||
|
|
getCustomerSummary,
|
||
|
|
getDynamicSummary,
|
||
|
|
getSubordinate
|
||
|
|
} from '@/services/home/home';
|
||
|
|
import QiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showNav: false,
|
||
|
|
timeRange: [dayjs().subtract(Number(1), 'day').format('YYYY-MM-DD'), dayjs().subtract(Number(1), 'day')
|
||
|
|
.format('YYYY-MM-DD')
|
||
|
|
],
|
||
|
|
chartData: {},
|
||
|
|
opts: {
|
||
|
|
rotate: false,
|
||
|
|
rotateLock: false,
|
||
|
|
color: ["#29BBE4", "#27417D"],
|
||
|
|
padding: [1, 1, 1, 1],
|
||
|
|
dataLabel: true,
|
||
|
|
enableScroll: false,
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: "bottom",
|
||
|
|
lineHeight: 20
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
name: "0",
|
||
|
|
fontSize: 20,
|
||
|
|
color: "#000000"
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
name: this.$t('home.numberOfClients'),
|
||
|
|
fontSize: 12,
|
||
|
|
color: "#666666"
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
ring: {
|
||
|
|
ringWidth: 25,
|
||
|
|
activeOpacity: 0.5,
|
||
|
|
activeRadius: 10,
|
||
|
|
offsetAngle: 0,
|
||
|
|
labelWidth: 15,
|
||
|
|
border: false,
|
||
|
|
borderWidth: 3,
|
||
|
|
borderColor: "#FFFFFF"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
registeredNumberOfUsers: 0,
|
||
|
|
depositAmount: 0,
|
||
|
|
goldInUserNum: 0,
|
||
|
|
tradeUserNum: 0,
|
||
|
|
withdrawalAmount: 0,
|
||
|
|
agencyCommission: 0,
|
||
|
|
commissionWithdrawal: 0,
|
||
|
|
lotVolume: 0,
|
||
|
|
tradingProfitAndLoss: 0,
|
||
|
|
waitingDeposit: 0,
|
||
|
|
secondaryTransformation: 0,
|
||
|
|
followUpContinuously: 0,
|
||
|
|
noContact: 0,
|
||
|
|
unintentionalDirection: 0,
|
||
|
|
ifOrg:true,
|
||
|
|
power:'all',
|
||
|
|
power_id:undefined,
|
||
|
|
qcc_fuzzy_search:undefined,
|
||
|
|
subordinateList:[],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async statSaleLeadData() {
|
||
|
|
const res = await statSaleLeadData();
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
let data = res.data;
|
||
|
|
this.waitingDeposit = data.goldInNum ? data.goldInNum : 0
|
||
|
|
this.secondaryTransformation = data.eczhNum ? data.eczhNum : 0
|
||
|
|
this.followUpContinuously = data.cxgjNum ? data.cxgjNum : 0
|
||
|
|
this.noContact = data.noContactNum ? data.noContactNum : 0
|
||
|
|
this.unintentionalDirection = data.wyxNum ? data.wyxNum : 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
switchData(f){
|
||
|
|
if (f){
|
||
|
|
this.ifOrg = false
|
||
|
|
this.power = 'one'
|
||
|
|
}else {
|
||
|
|
this.ifOrg = true
|
||
|
|
this.power = 'all'
|
||
|
|
}
|
||
|
|
this.getCustomerSummary()
|
||
|
|
this.getDynamicSummary()
|
||
|
|
},
|
||
|
|
handleDaterangeChange() {
|
||
|
|
this.$nextTick(() =>{
|
||
|
|
this.getCustomerSummary()
|
||
|
|
this.getDynamicSummary()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
activeUser(id){
|
||
|
|
this.power_id = id
|
||
|
|
},
|
||
|
|
switchUserData(){
|
||
|
|
this.$refs.popup.close();
|
||
|
|
this.power = 'user';
|
||
|
|
this.getCustomerSummary()
|
||
|
|
this.getDynamicSummary()
|
||
|
|
},
|
||
|
|
async getCustomerSummary(){
|
||
|
|
const res = await getCustomerSummary({
|
||
|
|
power:this.power,
|
||
|
|
power_id:this.power_id,
|
||
|
|
time_start: this.timeRange[0],
|
||
|
|
time_end: this.timeRange[1]
|
||
|
|
});
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
let data = res.data;
|
||
|
|
let chart = {
|
||
|
|
series: [{
|
||
|
|
data: [{
|
||
|
|
"name": this.$t('form.userType.ib') + " : " + Number(data
|
||
|
|
.new_ib_num),
|
||
|
|
"value": Number(data.new_ib_num),
|
||
|
|
labelShow: false
|
||
|
|
}, {
|
||
|
|
"name": this.$t('form.userType.customer') + " : " + Number(data
|
||
|
|
.new_client_num),
|
||
|
|
"value": Number(data.new_client_num),
|
||
|
|
labelShow: false
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
this.chartData = JSON.parse(JSON.stringify(chart))
|
||
|
|
this.opts.subtitle.name = Number(data.new_ib_num) + Number(data.new_client_num)
|
||
|
|
this.registeredNumberOfUsers = Number(data.new_ib_num) + Number(data.new_client_num)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getDynamicSummary() {
|
||
|
|
const res = await getDynamicSummary({
|
||
|
|
power:this.power,
|
||
|
|
power_id:this.power_id,
|
||
|
|
time_start: this.timeRange[0],
|
||
|
|
time_end: this.timeRange[1]
|
||
|
|
});
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
let data = res.data;
|
||
|
|
this.goldInUserNum = Number(data.gold_in_user_num)
|
||
|
|
this.tradeUserNum = Number(data.trade_user_num)
|
||
|
|
this.depositAmount = Number(data.mt_gold_in_amount)
|
||
|
|
this.withdrawalAmount = Number(data.mt_gold_out_amount)
|
||
|
|
this.agencyCommission = Number(data.receive_rebate_amount)
|
||
|
|
this.commissionWithdrawal = Number(data.crm_gold_out_amount)
|
||
|
|
this.lotVolume = Number(data.trades_volume)
|
||
|
|
this.tradingProfitAndLoss = Number(data.trades_profit)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getSubordinate() {
|
||
|
|
const res = await getSubordinate({
|
||
|
|
qcc_fuzzy_search:this.qcc_fuzzy_search
|
||
|
|
});
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.subordinateList = res.data
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showUserModal() {
|
||
|
|
this.getSubordinate()
|
||
|
|
this.$refs.popup.open()
|
||
|
|
},
|
||
|
|
showtimeRange() {
|
||
|
|
this.$refs.timeRange.show();
|
||
|
|
},
|
||
|
|
skipSell(status) {
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/customer/sell/index?status=' + status
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.handleDaterangeChange();
|
||
|
|
this.statSaleLeadData();
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
UniDataSelect,
|
||
|
|
QiunDataCharts,
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.showNav = true
|
||
|
|
},
|
||
|
|
onHide() {
|
||
|
|
this.showNav = false
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'index.scss';
|
||
|
|
</style>
|