php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(market): 重构市场数据页面 

- 新增员工端统计功能，区分市场人员和销售人员展示不同数据
- 优化图表展示，增加环形图和漏斗图的使用
- 调整页面布局，增加统计分析和统计排名切换功能
- 优化数据处理逻辑，提高页面加载速度
master
liutong 10 months ago
parent
f71cb513d0
commit
f79ce22261
2 changed files with 349 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      api/apiRoute.js
  2. 289
      pages/market/data/index.vue

8
api/apiRoute.js
View File

@ -329,6 +329,14 @@ export default {
})
},
//员工端统计(销售)-获取销售数据页统计
xs_statisticsMarketData(data = {}) {
let url = '/statistics/marketData'
return http.get(url, data).then(res => {
return res;
})
},

289
pages/market/data/index.vue
View File

@ -6,8 +6,10 @@
<view class="title">数据</view>
</view>
<!-- 市场人员展示-->
<view v-if="infoData.role_type == 'market_type'">
<view class="count_section">
<view class="title_box">业绩目标</view>
<view class="title_box">业绩统计</view>
<view class="box_1">
<view class="left">
<view class="charts-box">
@ -19,24 +21,24 @@
</view>
</view>
<view class="right">
<view class="title">目标金额</view>
<view class="title">本周已分配</view>
<view class="content">
<text class="strong">￥{{infoData.goal}}</text>
<text class="strong">{{infoData.num_1}}人</text>
</view>
<view class="title">完成金额</view>
<view class="title">本周未分配</view>
<view class="content">
<text class="strong">￥{{infoData.wx_performance}}</text>
<text>较上月</text>
<text class="strong">{{infoData.num_2}}人</text>
<!-- <text>较上月</text>-->
</view>
<view class="legeng">
<view class="item">
<view class="piece" style="background-color: #45c59f;"></view>
<view class="lable">新签</view>
<view class="lable">已分配</view>
<view class="item">
<view class="piece" style="background-color:#02a7f0;"></view>
<view class="lable">续费</view>
<view class="lable">未分配</view>
</view>
</view>
</view>
@ -58,11 +60,108 @@
</view>
</view>
<view class="main_section">
<view class="tag_section">
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view>
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view>
</view>
<!-- 销售分析-->
<view class="section_box_1" v-if="tagType=='1'">
<view class="left">
<qiun-data-charts
type="funnel"
:opts="opts_2"
:chartData="chartData_2"
/>
</view>
<view class="right">
<view class="item">
<view class="title" style="color: #12E7E8;">
已分配<text>({{infoData.num_1_rate}}%)</text>
</view>
<view class="title" style="color: #12E7E8;">
{{infoData.num_1}}<text>人</text>
</view>
</view>
<view class="item">
<view class="title" style="color: #4DA3FF;">
未分配<text>({{infoData.num_2_rate}}%)</text>
</view>
<view class="title" style="color: #4DA3FF;">
{{infoData.num_2}}<text>人</text>
</view>
</view>
<view class="item">
<view class="title" style="color: #FFCB31;">
本周拉新<text>({{infoData.num_3_rate}}%)</text>
</view>
<view class="title" style="color: #FFCB31;">
{{infoData.total_1}}<text>人</text>
</view>
</view>
</view>
</view>
<!-- 销售排名-->
<view class="section_box_2" v-else>
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k">
<view class="title">{{k+1}} {{v.name}}</view>
<view class="money">{{v.goal}}人</view>
<view class="plan">
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
</view>
</view>
</view>
</view>
</view>
<!-- 销售人员展示-->
<view v-else>
<view class="count_section">
<view class="title_box">业绩统计</view>
<view class="box_1">
<view class="left">
<view class="charts-box">
<qiun-data-charts
type="ring"
:opts="opts"
:chartData="chartData"
/>
</view>
</view>
<view class="right">
<view class="title">已成交</view>
<view class="content">
<text class="strong">{{infoData.num_1}}人</text>
</view>
<view class="title">未成交</view>
<view class="content">
<text class="strong">{{infoData.num_2}}人</text>
<!-- <text>较上月</text>-->
</view>
<view class="legeng">
<view class="item">
<view class="piece" style="background-color: #45c59f;"></view>
<view class="lable">已成交</view>
<view class="item">
<view class="piece" style="background-color:#02a7f0;"></view>
<view class="lable">未成交</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="main_section">
<view class="tag_section">
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">销售分析</view>
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">销售排名</view>
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">统计分析</view>
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">统计排名</view>
</view>
<!-- 销售分析-->
@ -77,28 +176,28 @@
<view class="right">
<view class="item">
<view class="title" style="color: #12E7E8;">
成交率<text>({{infoData.cj_lv}}%)</text>
已成交<text>({{infoData.num_1_rate}}%)</text>
</view>
<view class="title" style="color: #12E7E8;">
{{infoData.cj_count}}<text>人</text>
{{infoData.num_1}}<text>人</text>
</view>
</view>
<view class="item">
<view class="title" style="color: #4DA3FF;">
试听率<text>({{infoData.st_lv}}%)</text>
未成交<text>({{infoData.num_2_rate}}%)</text>
</view>
<view class="title" style="color: #4DA3FF;">
{{infoData.st_count}}<text>人</text>
{{infoData.num_2}}<text>人</text>
</view>
</view>
<view class="item">
<view class="title" style="color: #FFCB31;">
跟进率<text>({{infoData.gj_count}}%)</text>
本周分配<text>({{infoData.num_3_rate}}%)</text>
</view>
<view class="title" style="color: #FFCB31;">
{{infoData.gj_count}}<text>人</text>
{{infoData.total_1}}<text>人</text>
</view>
</view>
</view>
@ -108,13 +207,15 @@
<view class="section_box_2" v-else>
<view class="itme" v-for="(v,k) in infoData.staff_list" :key="k">
<view class="title">{{k+1}} {{v.name}}</view>
<view class="money">￥{{v.goal}}</view>
<view class="money">{{v.goal}}人</view>
<view class="plan">
<fui-progress :percent="getPercent(v.wx_yj,v.goal)" height="15" radius="100" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航-->
<AQTabber/>
@ -124,7 +225,8 @@
<script>
import marketApi from '@/api/market.js';
import apiRoute from '@/api/apiRoute.js';
// import marketApi from '@/api/market.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
@ -158,7 +260,7 @@ export default {
// lineHeight: 25 // 图例行高
},
title: {
name: "完成度", // 主标题文本
name: "本周分析", // 主标题文本
fontSize: 16, // 主标题字体大小
color: "#666666" // 主标题颜色
},
@ -222,7 +324,9 @@ export default {
type: "pyramid"
}
}
}
},
userInfo: {},//当前登录的用户信息
}
},
onLoad() {},
@ -231,12 +335,31 @@ export default {
},
methods: {
async init(){
this.getPerformance()
await this.getUserInfo()
await this.getPerformance()
},
//获取用户信息
async getUserInfo(){
let res = await apiRoute.getPersonnelInfo({})
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.userInfo = res.data
},
//获取统计信息
async getPerformance(){
let res= await marketApi.performance({})
let params = {
personnel_id:this.userInfo.id,//员工表id
role_key_arr:this.userInfo.role_key_arr,//角色key
}
let res= await apiRoute.xs_statisticsMarketData(params)
if (res.code != 1) {
uni.showToast({
title: res.msg,
@ -247,43 +370,92 @@ export default {
// console.log('xx',res)
this.infoData = res.data
//计算
let mb = this.infoData.wx_performance//总计
let xp =this.infoData.new_performance//新签
let xf =this.infoData.renew_performance//续费
// 如果总业绩为0，百分比设为0（避免除以0错误）
let xp_percent = mb != 0 ? parseInt((xp / mb) * 100) : 0;
let xf_percent = mb != 0 ? parseInt((xf / mb) * 100) : 0;
let wwc_percent = 100 - xp_percent - xf_percent >= 0 ? '0' : 100 - xp_percent - xf_percent//未完成
wwc_percent = parseInt(wwc_percent)
let w_c_d = ((xp + xf) - mb) * -1 * 100 //完成度
w_c_d = w_c_d <= 0 ? 0 : w_c_d
w_c_d = 100 - w_c_d
let w_c_d_rounded = Math.round(w_c_d * 10) / 10;
// console.log('zzz',[xp_percent,xf_percent,wwc_percent,w_c_d_rounded])
if(this.infoData.role_type == 'market_type'){
//市场人员
//环形统计图相关
let chartData_1 = {
series: [
{
data: [
{
"name": "已分配",
"value": this.infoData.num_1_rate,
"labelShow": false
},
{
"name": "未分配",
"value": this.infoData.num_2_rate,
"labelShow": false
},
{
"name": "总人数",
"value": this.infoData.num_3_rate,
"labelShow": false
},
]
}
]
};
this.chartData = JSON.parse(JSON.stringify(chartData_1));
this.opts.subtitle = {
name: `${this.infoData.num_4_rate}%`, // 副标题文本
fontSize: 18, // 副标题字体大小
color: "#7cb5ec" // 副标题颜色
}
//销售分析统计图相关
let chartDataB = {
series: [
{
data: [
{
"name": "本周拉新", // 数据项的名称，表示当前数据的分类为“跟进中”
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50
// "labelText":'跟进中'
"labelShow":false,
"color": "#FFCB31", // 自定义颜色
},
{
"name": "未分配",
"centerText": this.infoData.num_2,
"value": this.infoData.num_2_rate,
// "labelText":"试听"
"labelShow":false,
"color": "#4DA3FF", // 自定义颜色
},
{
"name": "已分配",
"centerText": this.infoData.num_1,
"value": this.infoData.num_1_rate,
// "labelText":"已成交"
"labelShow":false,
"color": "#12E7E8", // 自定义颜色
}
]
}
]
};
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB));
}else{
//环形统计图相关
let chartData_1 = {
series: [
{
data: [
{
"name": "未完成",
"value": wwc_percent,
"name": "已成交",
"value": this.infoData.num_1_rate,
"labelShow": false
},
{
"name": "续费",
"value": xf_percent,
"name": "未成交",
"value": this.infoData.num_2_rate,
"labelShow": false
},
{
"name": "新签",
"value": xp_percent,
"name": "总人数",
"value": this.infoData.num_3_rate,
"labelShow": false
},
]
@ -292,7 +464,7 @@ export default {
};
this.chartData = JSON.parse(JSON.stringify(chartData_1));
this.opts.subtitle = {
name: `${w_c_d_rounded}%`, // 副标题文本
name: `${this.infoData.num_4_rate}%`, // 副标题文本
fontSize: 18, // 副标题字体大小
color: "#7cb5ec" // 副标题颜色
}
@ -303,25 +475,25 @@ export default {
{
data: [
{
"name": "跟进中", // 数据项的名称，表示当前数据的分类为“跟进中”
"centerText": this.infoData.gj_count, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
"value": this.infoData.gj_lv, // 数据项的值，表示“跟进中”的数量为50
"name": "本周成交", // 数据项的名称，表示当前数据的分类为“跟进中”
"centerText": this.infoData.total_1, // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
"value": this.infoData.num_3_rate, // 数据项的值，表示“跟进中”的数量为50
// "labelText":'跟进中'
"labelShow":false,
"color": "#FFCB31", // 自定义颜色
},
{
"name": "试听",
"centerText": this.infoData.st_count,
"value": this.infoData.st_lv,
"name": "未成交",
"centerText": this.infoData.num_2,
"value": this.infoData.num_2_rate,
// "labelText":"试听"
"labelShow":false,
"color": "#4DA3FF", // 自定义颜色
},
{
"name": "已成交",
"centerText": this.infoData.cj_count,
"value": this.infoData.cj_lv,
"centerText": this.infoData.num_1,
"value": this.infoData.num_1_rate,
// "labelText":"已成交"
"labelShow":false,
"color": "#12E7E8", // 自定义颜色
@ -331,6 +503,11 @@ export default {
]
};
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB));
}
},
@ -416,7 +593,7 @@ export default {
.main_box{
background: #292929;
min-height: 28vh;
min-height: 100%;
}
//自定义导航栏

Write Preview
Loading…
Cancel
Save