You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
9.6 KiB
390 lines
9.6 KiB
<template>
|
|
<view class="assemble">
|
|
<view style="height: 20rpx;"></view>
|
|
<!-- 市场人员展示-->
|
|
<view class="div-style">
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlan.png')" class="drop-image">
|
|
</image>
|
|
</view>
|
|
<view class="title">本月业绩</view>
|
|
</view>
|
|
<view class="coach-message">
|
|
<view class="left1">
|
|
<view style="padding: 20rpx 0;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/huang.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">资源总数</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.new_total}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/lvs.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已分配</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.new_total}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/shenlan.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">昨日新增</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.yesterday_new}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/lan.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">今日新增</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.today_new}}人</view>
|
|
</view>
|
|
</view>
|
|
<!-- 统计图-->
|
|
<view class="right1">
|
|
<view style="text-align: center;">{{infoData.date_range}}</view>
|
|
<view class="statistics_box">
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar"
|
|
:style="{ height: `${infoData.month.yesterday_new_rate}%`, background: '#f59a23' }">
|
|
</view>
|
|
<view class="ratio"
|
|
:style="{ color: infoData.month.yesterday_new_rate <= 0 ? '#333333' : '#000' }">
|
|
{{ infoData.month.yesterday_new_rate }}%
|
|
</view>
|
|
</view>
|
|
<view class="title">昨日</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar"
|
|
:style="{ height: `${infoData.month.assigned_sales_rate}%`, background: '#039f64' }">
|
|
</view>
|
|
<view class="ratio"
|
|
:style="{ color: infoData.month.assigned_sales_rate <= 0 ? '#333333' : '#000' }">
|
|
{{ infoData.month.assigned_sales_rate }}%
|
|
</view>
|
|
</view>
|
|
<view class="title">分配</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar"
|
|
:style="{ height: `${infoData.month.today_new_rate}%`, background: '#4066f2' }">
|
|
</view>
|
|
<view class="ratio"
|
|
:style="{ color: infoData.month.today_new_rate <= 0 ? '#333333' : '#000' }">
|
|
{{ infoData.month.today_new_rate }}%
|
|
</view>
|
|
</view>
|
|
<view class="title">今日</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
|
|
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">个人业绩</view>
|
|
</view>
|
|
|
|
<view class="coach-message">
|
|
<view class="this_month">
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">今日新增资源</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.xzzy}}人</view>
|
|
</view>
|
|
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">今日业绩收入</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.yjsr}}元</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">历史关单数量</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.gdsl}}人</view>
|
|
</view>
|
|
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">资源未分配数量</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.wfpsl}}人</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
|
|
class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">本月提成</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.bytc}}元</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<AQTabber />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
infoData: {}, //详情
|
|
|
|
userInfo: {}, //当前登录的用户信息
|
|
}
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init() {
|
|
await this.getUserInfo()
|
|
await this.getXsIndex()
|
|
},
|
|
|
|
//获取用户信息
|
|
async getUserInfo() {
|
|
let res = await apiRoute.getPersonnelInfo({})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.userInfo = res.data
|
|
},
|
|
|
|
//获取销售首页详情
|
|
async getXsIndex() {
|
|
let role_key_arr = this.userInfo.role_key_arr.join(',')
|
|
let params = {
|
|
personnel_id: this.userInfo.id, //员工表id
|
|
role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串
|
|
}
|
|
let res = await apiRoute.xs_statisticsMarketHome(params)
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.infoData = res.data
|
|
console.log('统计', this.infoData)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
//自定义导航栏
|
|
.navbar_section {
|
|
border: 1px solid #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
.title {
|
|
padding: 40rpx 0rpx;
|
|
|
|
/* 小程序端样式 */
|
|
// #ifdef MP-WEIXIN
|
|
padding: 80rpx 0rpx;
|
|
// #endif
|
|
|
|
font-size: 30rpx;
|
|
color: #858585;
|
|
}
|
|
}
|
|
|
|
.assemble {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #292929;
|
|
}
|
|
|
|
.div-style {
|
|
width: 92%;
|
|
height: 85vh;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: auto;
|
|
}
|
|
|
|
.coach-message {
|
|
width: 92%;
|
|
margin: 10rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.drop-image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.left1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.right1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
|
|
.statistics_box {
|
|
margin: auto;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
width: 90rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: 328rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6rpx;
|
|
background: #f5f5f5;
|
|
position: relative;
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 0;
|
|
transition: height 0.3s ease;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.ratio {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: -0rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
margin-top: 5rpx;
|
|
padding: 0;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.this_month {
|
|
width: 100%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.drop-image-x {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.title-x {
|
|
font-size: 28rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.title-x1 {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-left: 60rpx;
|
|
}
|
|
</style>
|