403 lines
8.9 KiB
Vue
403 lines
8.9 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="querylist">
|
||
<view class="queryfir">
|
||
<picker mode="date" fields="year" @change="changeYear">
|
||
<view class="form_right">
|
||
<view>{{dataYear ? dataYear+'年' : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="queryfir">
|
||
<picker :range="typeList" :value="typeIndex" @change="changeDataType">
|
||
<view class="form_right">
|
||
<view>{{typeList[typeIndex] ? typeList[typeIndex] : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="queryfir">
|
||
<view class="form_right" @click="toSelect">
|
||
<view>{{staffObj.id ? staffObj.name : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 业绩总合 -->
|
||
<view class="sectionbox">
|
||
<view class="setAchieve" @click="toTarget">设置个人目标</view>
|
||
<view class="sec_type">
|
||
<picker :range="arr" :value="arrIndex" @change="changeArr" :range-key="'name'">
|
||
<view class="form_right">
|
||
<view style="font-size:28rpx;">{{arr[arrIndex] ? arr[arrIndex].name : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="sec_top">
|
||
<view class="sec_left">
|
||
<view class="left_t">目标(元)</view>
|
||
<view class="left_m">{{yeartarget.achievement?yeartarget.achievement:0}}</view>
|
||
</view>
|
||
<view class="sec_left">
|
||
<view class="left_t">完成(元)</view>
|
||
<view class="left_m">{{yeartarget.money?yeartarget.money:0}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="sec_bot">
|
||
<view class="pro_box">
|
||
<view class="pro_in" :style="{width:(yeartarget.ratio>100?100:yeartarget.ratio)+'%'}"></view>
|
||
</view>
|
||
<view class="bot_w">
|
||
<view class="bot_w_l">完成<span>{{yeartarget.ratio}}%</span></view>
|
||
<view class="bot_w_l">剩余目标<span>{{yeartarget.achievement-yeartarget.money>=0?yeartarget.achievement-yeartarget.money:0}}元</span></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 业绩图表 -->
|
||
<view class="chartbox">
|
||
<view class="chart_top">
|
||
<qiun-data-charts type="column" canvasId="jnt" :canvas2d="true" :ontouch="true" :opts="opts" :chartData="chartData" />
|
||
</view>
|
||
<view class="tabbox">
|
||
<view class="table_li">
|
||
<view class="table_td">时间</view>
|
||
<view class="table_td">目标(元)</view>
|
||
<view class="table_td">已完成(元)</view>
|
||
<view class="table_td">完成度</view>
|
||
</view>
|
||
<view class="table_li" v-for="(item,index) in list" :key="index">
|
||
<view class="table_td">{{item.month}}</view>
|
||
<view class="table_td">{{item.achievement?item.achievement:0}}</view>
|
||
<view class="table_td">{{item.money?item.money:0}}</view>
|
||
<view class="table_td">{{item.ratio}}%</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 选择员工 -->
|
||
<select-staff ref="staffChild" @sureStaff="sureStaff"></select-staff>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
BASE_IMG_URL
|
||
} from '@/util/api.js'
|
||
import selectStaff from '@/components/selectStaff.vue'
|
||
import {netAchievementStatistics} from '@/api/index.js'
|
||
|
||
export default {
|
||
components: {
|
||
selectStaff
|
||
},
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL: BASE_IMG_URL,
|
||
dataYear: '',
|
||
typeList: ['个人业绩'],
|
||
typeIndex: 0,
|
||
staffObj: {},
|
||
yeartarget:{},
|
||
list:[],
|
||
arr:[
|
||
{id:1,name:'合同'},
|
||
{id:2,name:'回款'},
|
||
],
|
||
arrIndex:0,
|
||
chartData:{},
|
||
opts: {
|
||
color: ["#f5f5f5", "#008EFF"],
|
||
padding: [15, 15, 0, 5],
|
||
dataLabel: false,
|
||
legend: {},
|
||
enableScroll: true,
|
||
xAxis: {
|
||
type: 'grid',
|
||
disableGrid: true,
|
||
gridType: 'dash',
|
||
itemCount: 4, //x轴单屏显示数据的数量，默认为5个
|
||
scrollShow: true, //新增是否显示滚动条，默认false
|
||
scrollAlign: 'left', //滚动条初始位置
|
||
scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
|
||
scrollColor: '#DEE7F7', //默认为 #A6A6A6
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
min: 0
|
||
}]
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "meter",
|
||
width: 12,
|
||
activeBgColor: "#f5f5f5",
|
||
activeBgOpacity: 1,
|
||
meterBorder: 0,
|
||
meterFillColor: "#dfdfdf",
|
||
barBorderRadius: [
|
||
50,
|
||
50,
|
||
50,
|
||
50
|
||
]
|
||
}
|
||
}
|
||
},
|
||
roleType:1,
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.roleType = uni.getStorageSync('roleType')
|
||
|
||
let time = new Date()
|
||
this.dataYear = time.getFullYear()
|
||
let userInfo = uni.getStorageSync('userinfo')
|
||
this.staffObj = {
|
||
id:userInfo.id,
|
||
name:userInfo.name
|
||
}
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let params = {
|
||
staff_id:this.staffObj.id,
|
||
year:this.dataYear,
|
||
status:this.arr[this.arrIndex].id
|
||
}
|
||
netAchievementStatistics(params).then(res=>{
|
||
res = res.data
|
||
let a = {
|
||
categories: res.echartdata.month,
|
||
series: [{
|
||
name: "目标值",
|
||
data: res.echartdata.achievement
|
||
},
|
||
{
|
||
name: "完成量",
|
||
data: res.echartdata.money
|
||
}
|
||
]
|
||
}
|
||
this.chartData = a
|
||
this.yeartarget = res.yeartarget
|
||
this.list = res.data
|
||
})
|
||
},
|
||
changeDataType(e) {
|
||
this.typeIndex = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeYear(e) {
|
||
this.dataYear = e.detail.value
|
||
this.getData()
|
||
},
|
||
toSelect() {
|
||
this.$refs.staffChild.init()
|
||
},
|
||
sureStaff(obj) {
|
||
this.staffObj = obj
|
||
this.getData()
|
||
},
|
||
changeArr(e) {
|
||
this.arrIndex = e.detail.value
|
||
this.getData()
|
||
},
|
||
//业绩目标
|
||
toTarget() {
|
||
if (this.roleType == 2 && (this.rules.indexOf('all') != -1 || this.rules.indexOf('2') != -1)) {
|
||
uni.navigateTo({
|
||
url: '/pagesA/crm/salesTarget/salesTarget',
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pagesA/crm/salesTarget/myTarget',
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.querylist {
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
|
||
.queryfir {
|
||
margin-right: 15rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.querysec {
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
// 数据看板
|
||
.form_right {
|
||
width: 180rpx;
|
||
height: 80rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.bottomimg {
|
||
width: 20rpx;
|
||
height: 33rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
.sectionbox {
|
||
padding: 40rpx 30rpx 40rpx;
|
||
background: #fff;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
.setAchieve{
|
||
position: absolute;
|
||
right:30rpx;
|
||
top:30rpx;
|
||
font-size:28rpx;
|
||
color:$uni-text-color;
|
||
}
|
||
.sec_type{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom:35rpx;
|
||
.form_right{
|
||
width: 180rpx;
|
||
height: 80rpx;
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
line-height: 48rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.bottomimg {
|
||
width: 20rpx;
|
||
height: 33rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
.sec_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.sec_left {
|
||
width: 49%;
|
||
flex-shrink: 0;
|
||
border-right: 1rpx solid #f5f5f5;
|
||
text-align: center;
|
||
|
||
&:last-child {
|
||
border-right: 0;
|
||
}
|
||
|
||
.left_t {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.left_m {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sec_bot {
|
||
margin-top: 45rpx;
|
||
|
||
.pro_box {
|
||
width: 690rpx;
|
||
height: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
|
||
.pro_in {
|
||
width: 300rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: $uni-text-color;
|
||
}
|
||
}
|
||
|
||
.bot_w {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.bot_w_l {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
|
||
span {
|
||
color: $uni-text-color;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chartbox{
|
||
margin-top:24rpx;
|
||
background:#fff;
|
||
padding:40rpx 30rpx;
|
||
.chart_top{
|
||
width:690rpx;
|
||
margin:0 auto 30rpx;
|
||
}
|
||
.tabbox{
|
||
border-top:1rpx solid #dfdfdf;
|
||
border-left:1rpx solid #dfdfdf;
|
||
width:690rpx;
|
||
.table_li{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
&:first-child{
|
||
background:rgba(3,170,150,0.5);
|
||
}
|
||
.table_td{
|
||
border-bottom:1rpx solid #dfdfdf;
|
||
border-right:1rpx solid #dfdfdf;
|
||
width:221rpx;
|
||
text-align: center;
|
||
padding:20rpx 0;
|
||
color:#333;
|
||
&:first-child{
|
||
width:120rpx;
|
||
}
|
||
&:last-child{
|
||
width:130rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|