402 lines
8.7 KiB
Vue
402 lines
8.7 KiB
Vue
<template>
|
||
<view class="person_rank">
|
||
<view class="querylist">
|
||
<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">
|
||
<picker :range="arrList" :value="arrIndex" @change="changeArr">
|
||
<view class="form_right">
|
||
<view>{{arrList[arrIndex] ? arrList[arrIndex] : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="queryfir" v-if="arrIndex == 1">
|
||
<picker mode="date" fields="month" @change="changeMonth">
|
||
<view class="form_right">
|
||
<view>{{dataMonth ? dataMonth+'月' : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="querysec" v-if="arrIndex == 0">
|
||
<picker mode="date" fields="year" @change="changeYeay">
|
||
<view class="form_right">
|
||
<view>{{dataYear ? dataYear+'年' : '点击选择'}}</view>
|
||
<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="achievement_head">
|
||
<view class="charts-box">
|
||
<qiun-data-charts
|
||
type="column"
|
||
:chartData="chartData"
|
||
canvasId="asdb"
|
||
:canvas2d="false"
|
||
:ontouch="true"
|
||
:opts="twoChart"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="achievement_footer">
|
||
<view class="footer_table">
|
||
<view class="table_time">
|
||
<view class="item_title">排名</view>
|
||
<view class="time_item" v-for="(item,index) in list" :key="index">
|
||
<view>{{item.ranking}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="table_time">
|
||
<view class="item_title" style="border-left: 0; border-right: 0;">姓名</view>
|
||
<view class="time_item" v-for="(item,index) in list" :key="index">
|
||
<view>{{item.staff.name}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-x="true" class="scroll">
|
||
<view class="con_title">
|
||
<view class="title_head">所在岗位</view>
|
||
<view class="title_head">成交金额</view>
|
||
<view class="title_head">成交订单</view>
|
||
<view class="title_head">平均客单价</view>
|
||
</view>
|
||
<view class="con_content" v-for="(item,index) in list" :key="index">
|
||
<view class="content_item" >
|
||
<view class="con_data">{{item.staff.post?item.staff.post:''}}</view>
|
||
<view class="con_data">¥ {{item.money}}</view>
|
||
<view class="con_data">{{item.count}}</view>
|
||
<view class="con_data">¥ {{item.unit_price}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { netDealRank } from '@/api/index.js'
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
show: true,
|
||
list:[],
|
||
dataYear:'',
|
||
typeList:['本人及下属','仅本人','仅下属'],
|
||
typeIndex:0,
|
||
arrList:['按年','按月'],
|
||
arrIndex:0,
|
||
dataMonth:'',
|
||
chartData: {},
|
||
twoChart:{
|
||
color:['#B81BCF', '#1B67CF'],
|
||
enableScroll: true,
|
||
xAxis: {
|
||
type:'grid',
|
||
gridType:'dash',
|
||
itemCount:3,//x轴单屏显示数据的数量，默认为5个
|
||
scrollShow:true,//新增是否显示滚动条，默认false
|
||
scrollAlign:'left',//滚动条初始位置
|
||
scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
|
||
scrollColor:'#DEE7F7',//默认为 #A6A6A6
|
||
}
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
let date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth()+1
|
||
this.dataYear = year
|
||
this.dataMonth = year+'-'+month
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let params = {
|
||
year:this.arrIndex == 0 ? this.dataYear : this.dataMonth,
|
||
type:this.typeIndex
|
||
}
|
||
netDealRank(params).then(res=>{
|
||
this.list = res.data.data
|
||
//处理 柱状图 数据
|
||
this.handleData(res.data.ranking)
|
||
})
|
||
},
|
||
handleData(data) {
|
||
data.reverse()
|
||
let y = []
|
||
let x1 = []
|
||
data.forEach((ele,index)=>{
|
||
y.push(ele.name)
|
||
x1.push(ele.number)
|
||
})
|
||
this.chartData = {
|
||
categories: y,
|
||
series: [
|
||
{"name": "完成量","data": x1}
|
||
],
|
||
}
|
||
},
|
||
changeYeay(e){
|
||
this.dataYear = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeDataType(e) {
|
||
this.typeIndex = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeMonth(e) {
|
||
this.dataMonth = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeArr(e) {
|
||
this.arrIndex = e.detail.value
|
||
this.getData()
|
||
}
|
||
},
|
||
components: {
|
||
},
|
||
onReady() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
|
||
.charts-box {
|
||
width: 100%;
|
||
height: 400px;
|
||
background:#fff;
|
||
}
|
||
.querylist{
|
||
margin:40rpx 0 30rpx;
|
||
padding:0 30rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
.queryfir{
|
||
margin-right:15rpx;
|
||
box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
|
||
background:#fff;
|
||
border-radius: 8rpx;
|
||
}
|
||
.querysec{
|
||
box-shadow: 2rpx 2rpx 50rpx rgba(0,0,0,0.1);
|
||
background:#fff;
|
||
border-radius: 8rpx;
|
||
}
|
||
// 数据看板
|
||
.form_right{
|
||
width:180rpx;
|
||
height:70rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.person_rank {
|
||
|
||
.achievement_body {
|
||
margin: 30rpx;
|
||
|
||
.achievement_title {
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 0 40rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
text-align: center;
|
||
flex-wrap: wrap;
|
||
|
||
.title_item {
|
||
width: 50%;
|
||
|
||
:first-child {
|
||
padding: 20rpx;
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.achievement_footer {
|
||
margin: 0 30rpx;
|
||
overflow: hidden;
|
||
|
||
.footer_table {
|
||
display: flex;
|
||
|
||
.table_time {
|
||
width: 200rpx;
|
||
white-space: nowrap;
|
||
|
||
.item_title {
|
||
padding-left: 20rpx;
|
||
font-weight: 700;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border: 1rpx solid #f2f2f2;
|
||
border-right: 0;
|
||
}
|
||
|
||
.time_item {
|
||
padding-left: 20rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
background-color: #fff;
|
||
border-bottom: 1rpx solid #EAEAEA;
|
||
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
white-space: nowrap;
|
||
width: 600rpx;
|
||
overflow: hidden;
|
||
|
||
.con_title {
|
||
.title_head {
|
||
display: inline-block;
|
||
width: 200rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
border-top: 1rpx solid #f2f2f2;
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
}
|
||
|
||
:last-child {
|
||
border-right: 1rpx solid #f2f2f2;
|
||
}
|
||
}
|
||
|
||
.con_content {
|
||
.content_item {
|
||
.con_data {
|
||
display: inline-block;
|
||
width: 200rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border-bottom: 1rpx solid #EAEAEA;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination_demo {
|
||
background-color: #fff;
|
||
padding: 30rpx 60rpx;
|
||
margin: 0 30rpx;
|
||
}
|
||
|
||
.van_po {
|
||
position: absolute;
|
||
|
||
.screen_con {
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
|
||
.screen_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 20rpx 20rpx 24rpx;
|
||
border-bottom: 1rpx solid #EAEAEA;
|
||
|
||
:first-child {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.screen_style {
|
||
.style_title {
|
||
padding-left: 24rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
|
||
.style_con {
|
||
display: flex;
|
||
width: 560rpx;
|
||
flex-wrap: wrap;
|
||
text-align: center;
|
||
padding-left: 9rpx;
|
||
|
||
.style_item {
|
||
width: 150rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border: 1rpx solid #f4f4f4;
|
||
margin: 15rpx 15rpx;
|
||
color: #b6b6b6;
|
||
}
|
||
|
||
.type_active,
|
||
.time_active {
|
||
border: 1rpx solid #52c1f5;
|
||
color: #52c1f5;
|
||
}
|
||
}
|
||
.style_input {
|
||
margin: 20rpx;
|
||
border: 1rpx solid #EAEAEA;
|
||
padding-left: 24rpx;
|
||
input {
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.button_bottom {
|
||
display: flex;
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
right: 0;
|
||
left: 0;
|
||
font-size: 32rpx;
|
||
height: 90rpx;
|
||
text-align: center;
|
||
|
||
.reset {
|
||
flex: 1;
|
||
line-height: 90rpx;
|
||
color: #1e89fe;
|
||
}
|
||
|
||
.sure {
|
||
flex: 1;
|
||
line-height: 90rpx;
|
||
background-color: $uni-text-color;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|