8 changed files with 2060 additions and 2254 deletions
@ -0,0 +1,375 @@ |
|||||
|
<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> |
||||
|
</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> |
||||
Loading…
Reference in new issue