Skip to content

C
confucius
Commit e1f4cafc authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent e127a11f
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 196 deletions
src/api/course/index.js
View file @ e1f4cafc
......@@ -657,3 +657,15 @@ export function queryPersonnelStatic(data) {
data
})
}
/**
* 首页人头奖励统计
* @param {JSON对象} data
*/
export function queryPersonnelBonusStatic(data) {
return request({
url: '/UserCenter/PersonnelBonusStatic',
method: 'post',
data
})
}
\ No newline at end of file
src/components/work/bonus.vue
View file @ e1f4cafc
......@@ -11,11 +11,10 @@
<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">
:placeholder="elDatePlaceholder" class="q-mr-sm" @change="research">
</el-date-picker>
<q-btn class="btn_bg" dense flat icon="more_horiz">
<q-menu auto-close>
......@@ -39,9 +38,9 @@
<div class="col flex q-pl-lg">
<img src="../../assets/images/newindex/bonus.png" alt="">
<div class="flex content-between q-pl-lg">
<div class="full-width block-name">月度总奖金</div>
<div class="block-num flex items-baseline"><span class="block-icon">¥</span> 0<span
class="block-after">.00</span> </div>
<div class="full-width block-name">{{tab==1?"月":"年"}}度总奖金</div>
<div class="block-num flex items-baseline"><span class="block-icon">¥</span>
{{dataList.TotalBonusMoney}}<span class="block-after"></span> </div>
</div>
</div>
<div class="q-pr-md">
......@@ -50,59 +49,59 @@
</div>
<div class="list-box">
<div class="list flex no-wrap items-center">
<div class="name">开单数量</div>
<div class="progress"> <span class="cur">0</span>/0</div>
<div class="name">名单人数</div>
<div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/0</div>
<div class="progress-charts">
<div>
距3档还差1个
{{dataList.NextGoal}}
</div>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div>
<div class="grade">1挡</div>
<div class="grade">{{dataList.CurrentStep}}挡</div>
<div class="num">
+¥0.00
+¥{{dataList.CurRewardMoney}}
</div>
</div>
<div class="list flex no-wrap items-center">
<div class="name">名单人数</div>
<div class="progress"> <span class="cur">0</span>/0</div>
<div class="name">开单奖励</div>
<div class="progress"> <span class="cur">{{dataList.OrderCount}}</span>/1</div>
<div class="progress-charts">
<template v-if="dataList.OrderCount-1>=0">
<div>
距0档还差0个
</div>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div>
<div class="grade">0挡</div>
<div class="num">
+¥0.00
</div>
已完成开单奖励
</div>
<div class="list flex no-wrap items-center">
<div class="name">名单人数</div>
<div class="progress"> <span class="cur">0</span>/0</div>
<div class="progress-charts">
</template>
<template v-else>
<div>
距0档还差0个
距1档还差{{1-dataList.OrderCount}}个
</div>
</template>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div>
<div class="grade">0挡</div>
<div class="grade">1挡</div>
<div class="num">
+¥0.00
+¥{{dataList.OpenBonus}}
</div>
</div>
<div class="list flex no-wrap items-center">
<div class="name">名单人数</div>
<div class="progress"> <span class="cur">0</span>/0</div>
<div class="name">线索奖励</div>
<div class="progress"> <span class="cur">{{dataList.ClueCount}}</span>/5</div>
<div class="progress-charts">
<template v-if="dataList.ClueCount-5>=0">
<div>
已完成线索奖励
</div>
</template>
<template v-else>
<div>
距0档还差0个
距1档还差{{5-dataList.ClueCount}}个
</div>
</template>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div>
<div class="grade">0挡</div>
<div class="grade">1挡</div>
<div class="num">
+¥0.00
+¥{{dataList.ClueNumSalary}}
</div>
</div>
</div>
......@@ -111,6 +110,9 @@
</div>
</template>
<script>
import {
queryPersonnelBonusStatic
} from '../../api/course/index'
import VueApexCharts from "vue-apexcharts";
export default {
components: {
......@@ -118,13 +120,13 @@
},
data() {
return {
tab: 2,
tab: 1,
date: "",
elDateType:"month",
elDatePlaceholder:"选择月",
series4: [ 4, 3, 2, 20, 7],
elDateType: "month",
elDatePlaceholder: "选择月",
series4: [4, 3, 2],
chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"],
labels: ["名单人数", "开单奖励", "线索奖励"],
chart: {
type: "donut",
width: 40,
......@@ -141,30 +143,85 @@
enabled: false
}
}
}
},
//查询参数
qMsg: {
Type: 1,
Year: 2021,
Month: 12
},
dataList: {},
};
},
methods:{
checkTab(type){
if(type==1){
this.tab=1
this.elDateType="month"
this.elDatePlaceholder="选择月"
this.date=""
}else if(type==2){
this.tab=2
this.elDateType="year"
this.elDatePlaceholder="选择年"
this.date=""
created() {
},
mounted() {
this.getList();
},
methods: {
//点击切换
checkTab(type) {
if (type == 1) {
this.tab = 1
this.elDateType = "month"
this.elDatePlaceholder = "选择月"
this.date = ""
this.qMsg.Type = 1;
} else if (type == 2) {
this.tab = 2
this.elDateType = "year"
this.elDatePlaceholder = "选择年"
this.date = ""
this.qMsg.Type = 2;
}
this.research();
},
research() {
this.getList();
},
getList() {
if (this.data == "") {
var date = new Date();
var yearStr = date.getFullYear(); //获取完整的年份(4位)
var MonthStr = date.getMonth(); //获取当前月份(0-11,0代表1月)
this.qMsg.Year = yearStr;
//月度
if (this.qMsg.Type == 1) {
this.qMsg.Month = MonthStr;
}
//年度
else {
this.qMsg.Month = 0;
}
} else {
var array = this.date.split('-');
if (array != null && array.length == 2) {
var yearStr = array[0];
var MonthStr = array[1];
this.qMsg.Year = yearStr;
//月度
if (this.qMsg.Type == 1) {
this.qMsg.Month = MonthStr;
}
//年度
else {
this.qMsg.Month = 0;
}
}
}
queryPersonnelBonusStatic(this.qMsg).then(res => {
if (res.Code == 1) {
this.dataList = res.Data;
this.series4 = [this.dataList.CurRewardMoney, this.dataList.OpenBonus, this.dataList.ClueNumSalary];
}
})
}
}
};
</script>
<style lang="scss" scoped>
.bonus {
// width: 660px;
height: 440px;
border-radius: 8px;
background-color: #FFFFFF;
......@@ -213,7 +270,7 @@
.block-name {
font-size: 14px;
white-space:nowrap;
white-space: nowrap;
font-family: PingFang SC;
color: #A4A5B7;
}
......@@ -249,7 +306,7 @@
font-size: 14px;
color: #111111;
margin-right: 2.86vw;
white-space:nowrap;
white-space: nowrap;
}
.progress {
......@@ -301,5 +358,4 @@
color: #2961FE !important;
font-size: 12px;
}
</style>
\ No newline at end of file
src/components/work/sell.vue
View file @ e1f4cafc
......@@ -201,127 +201,7 @@
return {
series: [{
name: "新加名单",
data: [{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-10",
y: 5
},
{
x: "09-11",
y: 2
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
},
{
x: "09-12",
y: 1
},
{
x: "09-13",
y: 22
},
{
x: "09-14",
y: 11
},
{
x: "09-15",
y: 3
}
]
data: []
}],
chartOptions: {
chart: {
......@@ -354,6 +234,7 @@
sellBlock: 1,
//人员统计
PersionData: {},
};
},
created() {
......@@ -368,23 +249,10 @@
queryPersonnelStatic({}).then(res => {
if (res.Code == 1) {
this.PersionData = res.Data;
this.series[0].data = res.Data.dayList
}
console.log("res", res);
});
},
checkTab(type) {
if (type == 1) {
this.tab = 1
this.elDateType = "month"
this.elDatePlaceholder = "选择月"
this.date = ""
} else if (type == 2) {
this.tab = 2
this.elDateType = "year"
this.elDatePlaceholder = "选择年"
this.date = ""
}
},
ckeckSell(n) {
this.sellBlock = n
}
......
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