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) { ...@@ -657,3 +657,15 @@ export function queryPersonnelStatic(data) {
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 @@ ...@@ -11,11 +11,10 @@
<div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度 <div class="tab" :class="{'active-tab':tab==2}" @click="checkTab(2)">年度
<div class='dot' v-show="tab==2"></div> <div class='dot' v-show="tab==2"></div>
</div> </div>
</div> </div>
<div> <div>
<el-date-picker v-model="date" value-format="yyyy-MM" size="small" :type="elDateType" style="width:110px" <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> </el-date-picker>
<q-btn class="btn_bg" dense flat icon="more_horiz"> <q-btn class="btn_bg" dense flat icon="more_horiz">
<q-menu auto-close> <q-menu auto-close>
...@@ -39,9 +38,9 @@ ...@@ -39,9 +38,9 @@
<div class="col flex q-pl-lg"> <div class="col flex q-pl-lg">
<img src="../../assets/images/newindex/bonus.png" alt=""> <img src="../../assets/images/newindex/bonus.png" alt="">
<div class="flex content-between q-pl-lg"> <div class="flex content-between q-pl-lg">
<div class="full-width block-name">月度总奖金</div> <div class="full-width block-name">{{tab==1?"月":"年"}}度总奖金</div>
<div class="block-num flex items-baseline"><span class="block-icon">¥</span> 0<span <div class="block-num flex items-baseline"><span class="block-icon">¥</span>
class="block-after">.00</span> </div> {{dataList.TotalBonusMoney}}<span class="block-after"></span> </div>
</div> </div>
</div> </div>
<div class="q-pr-md"> <div class="q-pr-md">
...@@ -50,59 +49,59 @@ ...@@ -50,59 +49,59 @@
</div> </div>
<div class="list-box"> <div class="list-box">
<div class="list flex no-wrap items-center"> <div class="list flex no-wrap items-center">
<div class="name">开单数量</div> <div class="name">名单人数</div>
<div class="progress"> <span class="cur">0</span>/0</div> <div class="progress"> <span class="cur">{{dataList.GuestNum}}</span>/0</div>
<div class="progress-charts"> <div class="progress-charts">
<div> <div>
距3档还差1个 {{dataList.NextGoal}}
</div> </div>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" /> <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div> </div>
<div class="grade">1挡</div> <div class="grade">{{dataList.CurrentStep}}挡</div>
<div class="num"> <div class="num">
+¥0.00 +¥{{dataList.CurRewardMoney}}
</div> </div>
</div> </div>
<div class="list flex no-wrap items-center"> <div class="list flex no-wrap items-center">
<div class="name">名单人数</div> <div class="name">开单奖励</div>
<div class="progress"> <span class="cur">0</span>/0</div> <div class="progress"> <span class="cur">{{dataList.OrderCount}}</span>/1</div>
<div class="progress-charts"> <div class="progress-charts">
<template v-if="dataList.OrderCount-1>=0">
<div> <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>
<div class="list flex no-wrap items-center"> </template>
<div class="name">名单人数</div> <template v-else>
<div class="progress"> <span class="cur">0</span>/0</div>
<div class="progress-charts">
<div> <div>
距0档还差0个 距1档还差{{1-dataList.OrderCount}}个
</div> </div>
</template>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" /> <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div> </div>
<div class="grade">0挡</div> <div class="grade">1挡</div>
<div class="num"> <div class="num">
+¥0.00 +¥{{dataList.OpenBonus}}
</div> </div>
</div> </div>
<div class="list flex no-wrap items-center"> <div class="list flex no-wrap items-center">
<div class="name">名单人数</div> <div class="name">线索奖励</div>
<div class="progress"> <span class="cur">0</span>/0</div> <div class="progress"> <span class="cur">{{dataList.ClueCount}}</span>/5</div>
<div class="progress-charts"> <div class="progress-charts">
<template v-if="dataList.ClueCount-5>=0">
<div>
已完成线索奖励
</div>
</template>
<template v-else>
<div> <div>
距0档还差0个 距1档还差{{5-dataList.ClueCount}}个
</div> </div>
</template>
<q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" /> <q-linear-progress rounded size="6px" :value="0.8" color="warning" style="width:90px" />
</div> </div>
<div class="grade">0挡</div> <div class="grade">1挡</div>
<div class="num"> <div class="num">
+¥0.00 +¥{{dataList.ClueNumSalary}}
</div> </div>
</div> </div>
</div> </div>
...@@ -111,6 +110,9 @@ ...@@ -111,6 +110,9 @@
</div> </div>
</template> </template>
<script> <script>
import {
queryPersonnelBonusStatic
} from '../../api/course/index'
import VueApexCharts from "vue-apexcharts"; import VueApexCharts from "vue-apexcharts";
export default { export default {
components: { components: {
...@@ -118,13 +120,13 @@ ...@@ -118,13 +120,13 @@
}, },
data() { data() {
return { return {
tab: 2, tab: 1,
date: "", date: "",
elDateType:"month", elDateType: "month",
elDatePlaceholder:"选择月", elDatePlaceholder: "选择月",
series4: [ 4, 3, 2, 20, 7], series4: [4, 3, 2],
chartOptions4: { chartOptions4: {
labels: ["A类客户", "B类客户", "C类客户", "D类客户", "E类客户"], labels: ["名单人数", "开单奖励", "线索奖励"],
chart: { chart: {
type: "donut", type: "donut",
width: 40, width: 40,
...@@ -141,30 +143,85 @@ ...@@ -141,30 +143,85 @@
enabled: false enabled: false
} }
} }
} },
//查询参数
qMsg: {
Type: 1,
Year: 2021,
Month: 12
},
dataList: {},
}; };
}, },
methods:{ created() {
checkTab(type){
if(type==1){ },
this.tab=1 mounted() {
this.elDateType="month" this.getList();
this.elDatePlaceholder="选择月" },
this.date="" methods: {
}else if(type==2){ //点击切换
this.tab=2 checkTab(type) {
this.elDateType="year" if (type == 1) {
this.elDatePlaceholder="选择年" this.tab = 1
this.date="" 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bonus { .bonus {
// width: 660px;
height: 440px; height: 440px;
border-radius: 8px; border-radius: 8px;
background-color: #FFFFFF; background-color: #FFFFFF;
...@@ -213,7 +270,7 @@ ...@@ -213,7 +270,7 @@
.block-name { .block-name {
font-size: 14px; font-size: 14px;
white-space:nowrap; white-space: nowrap;
font-family: PingFang SC; font-family: PingFang SC;
color: #A4A5B7; color: #A4A5B7;
} }
...@@ -249,7 +306,7 @@ ...@@ -249,7 +306,7 @@
font-size: 14px; font-size: 14px;
color: #111111; color: #111111;
margin-right: 2.86vw; margin-right: 2.86vw;
white-space:nowrap; white-space: nowrap;
} }
.progress { .progress {
...@@ -301,5 +358,4 @@ ...@@ -301,5 +358,4 @@
color: #2961FE !important; color: #2961FE !important;
font-size: 12px; font-size: 12px;
} }
</style> </style>
\ No newline at end of file
src/components/work/sell.vue
View file @ e1f4cafc
...@@ -201,127 +201,7 @@ ...@@ -201,127 +201,7 @@
return { return {
series: [{ series: [{
name: "新加名单", name: "新加名单",
data: [{ 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
}
]
}], }],
chartOptions: { chartOptions: {
chart: { chart: {
...@@ -354,6 +234,7 @@ ...@@ -354,6 +234,7 @@
sellBlock: 1, sellBlock: 1,
//人员统计 //人员统计
PersionData: {}, PersionData: {},
}; };
}, },
created() { created() {
...@@ -368,23 +249,10 @@ ...@@ -368,23 +249,10 @@
queryPersonnelStatic({}).then(res => { queryPersonnelStatic({}).then(res => {
if (res.Code == 1) { if (res.Code == 1) {
this.PersionData = res.Data; 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) { ckeckSell(n) {
this.sellBlock = 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