266 lines
6.2 KiB
Vue
266 lines
6.2 KiB
Vue
<template>
|
||
<view class="">
|
||
<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.rank}}</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>
|
||
|
||
<view class="con_content">
|
||
<view class="content_item" v-for="(item,index) in list" :key="index">
|
||
<view class="con_data">{{item.name}}</view>
|
||
<view class="con_data">{{item.group_text ? item.group_text : '-'}}</view>
|
||
<view class="con_data">{{item.number}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
import { netCustomerARank } from '@/api/index.js'
|
||
|
||
export default{
|
||
data() {
|
||
return{
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
typeList:['本人及下属','仅本人','仅下属'],
|
||
typeIndex:0,
|
||
arrList:['按年','按月'],
|
||
arrIndex:0,
|
||
dataMonth:'',
|
||
dataYear:'',
|
||
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
|
||
}
|
||
},
|
||
list:[]
|
||
}
|
||
},
|
||
created() {
|
||
let date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth()+1
|
||
this.dataYear = year
|
||
this.dataMonth = year+'-'+month
|
||
this.getData()
|
||
},
|
||
methods:{
|
||
changeYeay(e){
|
||
this.dataYear = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeMonth(e) {
|
||
this.dataMonth = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeArr(e) {
|
||
this.arrIndex = e.detail.value
|
||
this.getData()
|
||
},
|
||
changeDataType(e) {
|
||
this.typeIndex = e.detail.value
|
||
this.getData()
|
||
},
|
||
getData() {
|
||
let params = {
|
||
date:this.arrIndex == 0 ? this.dataYear : this.dataMonth,
|
||
type:this.typeIndex
|
||
}
|
||
netCustomerARank(params).then(res=>{
|
||
this.list = res.data.ranking
|
||
//处理 柱状图 数据
|
||
this.handleData(res.data.data)
|
||
})
|
||
},
|
||
//处理 柱状图 数据
|
||
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}
|
||
],
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.achievement_footer {
|
||
margin: 0 30rpx;
|
||
overflow: hidden;
|
||
|
||
.footer_table {
|
||
display: flex;
|
||
|
||
.table_time {
|
||
width: 100rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |