Skip to content

C
confucius
Commit 2b12e79f authored by 罗超's avatar 罗超
Browse files
Options

1

parent 03b1af6f
Hide whitespace changes
Inline Side-by-side
Showing with 350 additions and 283 deletions
package.json
View file @ 2b12e79f
......@@ -25,6 +25,7 @@
"element-ui": "^2.14.1",
"html2canvas": "^1.3.2",
"js-md5": "^0.7.3",
"jsencrypt": "^3.2.1",
"lockr": "^0.8.5",
"lrz": "^4.9.41",
"mavon-editor": "^2.9.1",
......
src/App.vue
View file @ 2b12e79f
......@@ -20,7 +20,7 @@ export default {
</script>
<style>
@import url("//at.alicdn.com/t/font_2077629_70it4rlfqmf.css");
@import url("//at.alicdn.com/t/font_2077629_qyots58c4km.css");
@font-face{
font-family: 'din';
src: url('./assets/font/DIN-Bold.otf') format('opentype');
......
src/api/work/index.js 0 → 100644
View file @ 2b12e79f
import request from '../../utils/request'
/**
* 首页 获取业绩提成统计
*/
export function GetSellStatistics(data) {
return request({
url: '/SellAchievements/GetSellCenterAchievementsStatistics',
method: 'post',
data
})
}
/**
* 首页 获取业绩提成发放分页列表
*/
export function GetAchievementsEmpPageList(data) {
return request({
url: '/SellAchievements/GetAchievementsEmpPageList',
method: 'post',
data
})
}
/**
* 首页 获取佣金统计接口
*/
export function GetCenterCommissionStatistics(data) {
return request({
url: '/CustomerCommission/GetCenterCommissionStatistics',
method: 'post',
data
})
}
\ No newline at end of file
src/components/work/commission.vue
View file @ 2b12e79f
<template>
<div class="q-px-md q-pt-md item-shadow commission">
<div class="row flex justify-between items-center q-mb-lg">
<div class="flex items-center">
<div class="commission-title">提成</div>
<div class="tab" :class="{'active-tab':tab==1}" @click="checkTab(1)">月度
<div class='dot' v-show="tab==1"></div>
</div>
<!-- <div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度
<div class="q-px-md q-pt-md item-shadow commission">
<div class="row flex justify-between items-center q-mb-lg">
<div class="flex items-center">
<div class="commission-title">提成</div>
<div class="tab" :class="{'active-tab':tab==1}" @click="checkTab(1)">月度
<div class='dot' v-show="tab==1"></div>
</div>
<!-- <div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度
<div class='dot' v-show="tab==2"></div>
</div> -->
</div>
<div>
<el-date-picker v-model="date" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
:placeholder="elDatePlaceholder" class="q-mr-sm">
</el-date-picker>
<q-btn class="btn_bg" dense flat icon="more_horiz">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="arrow-up" size="14"></q-icon>
</div>
<div>立即跟进</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div>
<el-date-picker v-model="msg.Month" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px"
:placeholder="elDatePlaceholder" class="q-mr-sm" @change="getData">
</el-date-picker>
<q-btn class="btn_bg" dense flat icon="more_horiz">
<q-menu auto-close>
<q-list dense>
<q-item clickable>
<q-item-section>
<div class="row">
<div class="q-mr-xs">
<q-icon name="arrow-up" size="14"></q-icon>
</div>
<div>立即跟进</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
<div class="row no-wrap items-center q-my-lg">
<div class="col flex no-wrap q-pl-lg" style="height:62px">
<img src="../../assets/images/newindex/ticheng1.png" alt="">
<div class="flex content-between q-pl-lg" style="height:62px">
<div class="full-width block-name">本月交易额</div>
<div class="block-num flex no-wrap items-baseline"><span
class="block-icon">¥</span>{{formatPrice(commissionData.TotalSaleMoney,1)}}<span
class="block-after">{{formatPrice(commissionData.TotalSaleMoney,2)}}</span> </div>
</div>
<div class="row no-wrap items-center q-my-lg">
<div class="col flex no-wrap q-pl-lg" style="height:62px">
<img src="../../assets/images/newindex/ticheng1.png" alt="">
<div class="flex content-between q-pl-lg" style="height:62px">
<div class="full-width block-name">本月交易额</div>
<div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span> 0<span
class="block-after">.00</span> </div>
</div>
<div class="q-pr-md">
<VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
</div>
</div>
<div class="block-name q-px-md">
<div>当月年终进度</div>
<div class="progress-box flex no-wrap">
<div v-for="(item,index) in commissionData.RateList" :key="index" class="full-width relative-position">
<q-linear-progress size="20px" :value="formatProgressValue(item)" :track-color="'grey-'+(index+5)" :color="'blue-'+(index+2)">
<div class="absolute-full flex flex-center progress-tag">
{{formatProgress(item.StartValue)}}-{{formatProgress(item.EndValue)}}
</div>
</div>
<div class="q-pr-md">
<VueApexCharts width="105" height="105" :options="chartOptions4" :series="series4"></VueApexCharts>
</q-linear-progress>
<div class="rate-box">
<div class="sanjiao" :style="{'border-bottom-color':commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1?'#FF7262':'#CACACA'}"></div>
<div class="rate full-width" :class="{'active-rate':commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1}">
<i class="iconfont icon-checkgou " v-if="commissionData.TotalSaleMoney>item.EndValue&&item.EndValue!==-1" style="font-size:8px"></i> {{item.Rate}}%
</div>
</div>
</div>
<div class="block-name q-px-md">
<div>当月年终进度</div>
<div class="progress-box flex no-wrap">
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
25%
</div>
<q-linear-progress size="20px" :value="progress1" track-color="progress-1" color="blue-3"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
0-2.5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
50%
</div>
<q-linear-progress size="20px" :value="progress2" track-color="progress-2" color="blue-4"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
2.5w-5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
75%
</div>
<q-linear-progress size="20px" :value="progress3" track-color="progress-3" color="blue-5"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
5w-7.5w
</div>
</q-linear-progress>
</el-tooltip>
<el-tooltip placement="bottom" :value="true" :offset="-5" manual popper-class="progress-tip">
<div slot="content">
100%
</div>
<q-linear-progress size="20px" :value="progress4" track-color="progress-4" color="blue-6"
class="progress-block ">
<div class="absolute-full flex flex-center progress-tag">
7.5w-10w
</div>
</q-linear-progress>
</el-tooltip>
</div>
</div>
<div class="commission-block2 flex wrap content-between">
<div class="col flex no-wrap q-pl-xs">
<img src="../../assets/images/newindex/ticheng2.png" alt="" style="height:62px">
<div class="flex content-between q-pl-lg">
<div class="full-width block-name">提成</div>
<div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span>
{{formatInt(commissionData.MonthCommission)}}<span
class="block-after">{{formatDecimal(commissionData.MonthCommission)}}</span> </div>
</div>
</div>
<div class="flex no-wrap justify-between full-width">
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex no-wrap justify-center items-baseline">
<span class="before">¥</span>
{{formatInt(commissionData.TotalCommission)}}
<span class="after">{{formatDecimal(commissionData.TotalCommission)}}</span>
</div>
<div class="statistic-name">
提成累计
</div>
</div>
<div class="commission-block2 flex wrap content-between">
<div class="col flex no-wrap q-pl-xs">
<img src="../../assets/images/newindex/ticheng2.png" alt="" style="height:62px">
<div class="flex content-between q-pl-lg">
<div class="full-width block-name">提成</div>
<div class="block-num flex no-wrap items-baseline"><span class="block-icon">¥</span> 0<span
class="block-after">.00</span> </div>
</div>
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex no-wrap justify-center items-baseline">
<span class="before">¥</span>
{{formatInt(commissionData.GiveOutCommission)}}
<span class="after">{{formatDecimal(commissionData.GiveOutCommission)}}</span>
</div>
<div class="flex no-wrap justify-between full-width">
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex no-wrap justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
提成累计
</div>
</div>
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
已发放
</div>
</div>
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
0
<span class="after">.00</span>
</div>
<div class="statistic-name">
待发放
</div>
</div>
<div class="statistic-name">
已发放
</div>
</div>
<div class="commission-table">
<div class="row q-mb-md">
<q-input filled dense v-model="input" label="标题" class="col-4 q-mr-md" />
<q-select filled dense v-model="select" :options="options" label="状态" option-label="label" class="col-4"
option-value="value" map-options emit-value />
<div class="statistic-block flex wrap justify-center content-center">
<div class="statistic-price full-width flex justify-center items-baseline">
<span class="before">¥</span>
{{formatInt(commissionData.WaitCommission)}}
<span class="after">{{formatDecimal(commissionData.WaitCommission)}}</span>
</div>
<div class="statistic-name">
待发放
</div>
<q-table :data="tableData" :pagination="pageMsg" no-data-label="暂无相关数据" flat :columns="columns" row-key="Id"
separator="horizontal" hide-bottom>
<template v-slot:body-cell-ratio="props">
<q-td auto-width :props="props">
<div>{{props.row.ratio*100}}%</div>
<q-linear-progress :value="parseFloat(props.row.ratio)" rounded size="sm"/>
</q-td>
</template>
</q-table>
</div>
</div>
</div>
<div class="commission-table">
<div class="row q-mb-md">
<q-input filled dense clearable clear-icon="clear" label-color="text-label" v-model="listMsg.OrderId"
label="订单ID" class="col-4 q-mr-md" @input="getList" />
<!-- <q-select filled dense v-model="select" :options="options" label="状态" option-label="label" class="col-4"
option-value="value" map-options emit-value /> -->       
</div>
<q-table :data="tableData" :pagination="pageMsg" no-data-label="暂无相关数据" flat :columns="columns" row-key="Id"
separator="horizontal">
<template v-slot:body-cell-Rate="props">
<q-td auto-width :props="props">
<div>{{props.row.Rate}}%</div>
<q-linear-progress :value="parseFloat(props.row.Rate/100)" rounded size="sm" />
</q-td>
</template>
<template v-slot:bottom>
<q-pagination class="full-width justify-end" size="14px" v-model="listMsg.pageIndex" color="primary"
:max="pageCount" :input="true" @input="changePage" />
</template>
</q-table>
</div>
</div>
</template>
<script>
import {
GetSellStatistics,
GetAchievementsEmpPageList
} from '../../api/work/index'
import VueApexCharts from "vue-apexcharts";
import {formatPrice,formatInt,formatDecimal} from '../../utils/formatPrice'
export default {
components: {
VueApexCharts
......@@ -167,16 +146,18 @@
data() {
return {
tab: 1,
date: "",
msg: {
Month: "",
},
elDateType: "month",
elDatePlaceholder: "选择月",
progress1: 1,
progress2: 1,
progress3: 1,
progress4: 0.2,
series4: [4, 3, 2, 20, 7],
series4: [0, 0],
chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
labels: ['新收', '续费'],
chart: {
type: "donut",
width: 40,
......@@ -194,7 +175,16 @@
}
}
},
input: "",
commissionData: {
TotalSaleMoney: "", //业绩
NewSaleMoney: "", // 新收
RenewSaleMoney: "", //续费
MonthCommission: "", //当月提成
TotalCommission: "", //累计提成
GiveOutCommission: "", //已发放
WaitCommission: "", //待发放
RateList: [], //比例
},
select: "",
options: [{
label: '选项一',
......@@ -217,47 +207,65 @@
ratio: "0.3",
}],
columns: [{
name: 'name',
label: '标题',
name: 'OrderId',
label: '订单ID',
align: 'center',
field: "name",
field: "OrderId",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'commission',
name: 'PushMoney',
label: '总提成',
align: 'center',
field: "commission",
field: "PushMoney",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'giveout',
name: 'GiveOutMoney',
label: '已发放',
align: 'center',
field: "giveout",
field: "GiveOutMoney",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'all',
name: 'SaleMoney',
label: '销售总额',
align: 'center',
field: "all",
field: "SaleMoney",
headerStyle: 'color: #A4A5B7',
style: 'color: #A4A5B7',
}, {
name: 'ratio',
name: 'Rate',
label: '比例',
align: 'center',
field: "ratio",
field: "Rate",
headerStyle: 'color: #A4A5B7;width: 100px',
style: 'color: #A4A5B7',
}],
pageMsg: {
rowsPerPage: 0
}
rowsPerPage: 0,
},
listMsg: {
pageIndex: 1,
pageSize: 5,
OrderId: '',
},
pageCount: 0,
};
},
mounted() {
const d = new Date();
const year = d.getFullYear();
const month = d.getMonth() + 1;
this.msg.Month = year + '-' + (month < 10 ? '0' + month : month)
this.getData();
this.getList();
},
methods: {
formatPrice,
formatInt,
formatDecimal,
checkTab(type) {
if (type == 1) {
this.tab = 1
......@@ -270,6 +278,46 @@
this.elDatePlaceholder = "选择年"
this.date = ""
}
},
getData() {
GetSellStatistics(this.msg).then(res => {
this.commissionData = res.Data
this.series4 = [res.Data.NewSaleMoney, res.Data.RenewSaleMoney]
console.log(321, this.series4)
})
},
getList() {
GetAchievementsEmpPageList(this.listMsg).then(res => {
this.tableData = res.Data.PageData
this.pageCount = res.Data.PageCount
})
},
changePage(val) {
this.listMsg.pageIndex = val
this.getList()
},
formatProgress(price) {
if (price > 0) {
const s = price.toString().slice(0, -4) ? price.toString().slice(0, -4) : '0'
const e = price.toString().slice(-4, -3)
return s + (e > 0 ? ('.' + e) : '') + 'w';
} else if (price == 0) {
return 0
} else if (price == -1) {
return '∞'
}
},
formatProgressValue(item) {
if (this.commissionData.TotalSaleMoney > item.EndValue && item.EndValue !== -1) {
return 1
} else if (this.commissionData.TotalSaleMoney > item.StartValue && this.commissionData.TotalSaleMoney < item
.EndValue && item.EndValue !== -1) {
return (this.commissionData.TotalSaleMoney - item.StartValue) / (item.EndValue- item.StartValue)
} else {
return 0
}
}
}
};
......@@ -281,7 +329,7 @@
height: 980px;
border-radius: 8px;
background-color: #FFFFFF;
margin-bottom:20px;
margin-bottom: 20px;
.commission-title {
font-size: 18px;
......@@ -329,7 +377,7 @@
font-size: 14px;
font-family: PingFang SC;
color: #A4A5B7;
white-space:no-wrap;
white-space: no-wrap;
}
.block-num {
......@@ -354,11 +402,7 @@
height: 20px;
margin: 10px auto;
border-radius: 2px;
overflow: hidden;
.progress-block {
width: 25%;
}
// overflow: hidden;
.progress-tag {
text-align: center;
......@@ -433,52 +477,46 @@
font-size: 12px;
}
</style>
<style>
.bg-progress-1 {
background-color: #E1E1E1;
}
.bg-progress-2 {
background-color: #CACACA;
}
.bg-progress-3 {
background-color: #B3B3B3;
}
.bg-progress-4 {
background-color: #9B9B9B;
}
.bg-active-1 {
background-color: #89A8FE;
::v-deep .q-table__bottom {
min-height: 0;
padding: 0;
}
.bg-active-2 {
background-color: #6187F0;
}
.bg-active-3 {
background-color: #2961FE;
}
.bg-active-4 {
background-color: #0545F7;
}
.progress-tip {
padding: 2px 10px;
border-radius: 15px;
background-color: #CACACA !important;
}
.popper__arrow {
border-bottom-color: #cacaca !important;
}
.rate-box {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
color: #000;
z-index: 9;
display: flex;
flex-wrap: wrap;
justify-content: center;
.sanjiao {
width: 0;
height: 0;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-bottom: 3px solid #CACACA;
}
.popper__arrow::after {
border-bottom-color: #cacaca !important;
.rate {
min-width: 20px;
padding: 2px 6px;
background-color: #CACACA !important;
display: flex;
justify-content: center;
align-items: center;
color: #666666;
font-size: 12px;
font-family: PingFang SC;
border-radius: 7px;
line-height:12px;
}
.active-rate{
background-color: #FF7262 !important;
color: #FFFFFF !important;
}
}
</style>
</style>
\ No newline at end of file
src/components/work/dasbord.vue
View file @ 2b12e79f
......@@ -12,9 +12,9 @@
返佣
</div>
<div>
<el-date-picker v-model="value2" value-format="yyyy-MM" size="small" type="month" style="width:110px"
<!-- <el-date-picker v-model="value2" value-format="yyyy-MM" size="small" type="month" style="width:110px"
placeholder="选择月" class="q-mr-sm">
</el-date-picker>
</el-date-picker> -->
<q-btn class="btn_bg" dense flat icon="more_horiz">
<q-menu auto-close>
<q-list dense>
......@@ -33,13 +33,13 @@
</q-btn>
</div>
</div>
<VueApexCharts width="100%" height="90" :options="chartOptions" :series="series" style="margin-top:90px">
</VueApexCharts>
<!-- <VueApexCharts width="100%" height="90" :options="chartOptions" :series="series" style="margin-top:90px">
</VueApexCharts> -->
<div class="return-commission-Statistics flex wrap content-start">
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">¥</span>
0.00
{{formatInt(ReturnCommissionData.SttlementMoney)}}{{formatDecimal(ReturnCommissionData.SttlementMoney)}}
</div>
<div class="Statistics-label">
已返佣
......@@ -48,28 +48,28 @@
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
{{formatInt(ReturnCommissionData.UnSettlementMoney)}}{{formatDecimal(ReturnCommissionData.UnSettlementMoney)}}
</div>
<div class="Statistics-label">
待结算
待返佣
</div>
</div>
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
{{formatInt(ReturnCommissionData.CanCashOutMoney)}}{{formatDecimal(ReturnCommissionData.CanCashOutMoney)}}
</div>
<div class="Statistics-label">
累计返佣
待提现
</div>
</div>
<div class="Statistics-block">
<div class="Statistics-num">
<span class="Statistics-pre">￥</span>
0.00
{{formatInt(ReturnCommissionData.CashOutMoney)}}{{formatDecimal(ReturnCommissionData.CashOutMoney)}}
</div>
<div class="Statistics-label">
待返佣
已提现
</div>
</div>
</div>
......@@ -136,6 +136,10 @@
</template>
<script>
import {
GetCenterCommissionStatistics
} from '../../api/work/index'
import {formatInt,formatDecimal} from '../../utils/formatPrice'
import VueApexCharts from "vue-apexcharts";
import Bonus from './bonus'
import Commission from './commission'
......@@ -274,46 +278,6 @@
}
]
}],
chartOptions6: {
chart: {
type: "bar",
width: 100,
height: 35,
sparkline: {
enabled: true
}
},
plotOptions: {
bar: {
columnWidth: "80%"
}
},
labels: [],
xaxis: {
crosshairs: {
width: 1
}
},
tooltip: {
fixed: {
enabled: false
},
x: {
show: false
},
y: {
title: {
formatter: function (seriesName) {
return "";
}
}
},
marker: {
show: false
}
}
},
chartOptions: {
chart: {
type: "line",
......@@ -342,27 +306,25 @@
}
}
},
series4: [4, 3, 2, 20, 7],
chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
chart: {
type: "donut",
width: 40,
height: 40,
sparkline: {
enabled: true
}
},
stroke: {
width: 1
},
tooltip: {
fixed: {
enabled: false
}
}
ReturnCommissionData:{
UnSettlementMoney:0,//待返佣
SttlementMoney:0,//已返佣
CashOutMoney:0,//已提现
CanCashOutMoney:0,//待提现
}
};
},
mounted() {
this.getReturnCommission();
},
methods:{
formatInt,
formatDecimal,
getReturnCommission(){
GetCenterCommissionStatistics().then(res=>{
this.ReturnCommissionData=res.Data
})
}
}
};
......
src/utils/formatPrice.js 0 → 100644
View file @ 2b12e79f
//首页用
export const formatPrice = (price, type = 1) => {
if (type == 1) {
return parseInt(price)
} else if (type == 2) {
const findDot = Number(price).toFixed(2).toString().indexOf('.')
if (findDot > -1) {
return Number(price).toFixed(2).toString().slice(findDot)
} else {
return '00'
}
}
}
export const formatInt = (price) => {
if (price < 9999) {
return parseInt(price)
} else {
const s = parseInt(price).toString().slice(0, -4);
const e = parseInt(price).toString().slice(-4, -3)
return s + '.' + e
}
}
export const formatDecimal = (price=0) => {
if (price < 9999) {
const findDot = Number(price).toFixed(2).toString().indexOf('.')
if (findDot > -1) {
return Number(price).toFixed(2).toString().slice(findDot)
} else {
return '00'
}
} else {
return 'w'
}
}
\ No newline at end of file
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