forked from angelo/web-retail-h5
241 lines
7.8 KiB
Vue
241 lines
7.8 KiB
Vue
<template>
|
||
<div class="width-auto">
|
||
<div class="title">{{'等级业绩'}}</div>
|
||
<div class="left-s">
|
||
<div id="mounthData3" :style="myChartStyle">
|
||
|
||
</div>
|
||
</div>
|
||
<view class="flex-s">
|
||
<div class="item-s" v-for="item in gradeLists" v-if="item.name">
|
||
<div>
|
||
<div class="bg-color" :style="{background:`${item.color}`}"></div>
|
||
<div style="color: #333;text-align: center;">{{item.name}}</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import * as api from '@/config/distribute.js'
|
||
import {parentAchieveLeft, parentAchieveRight, systemGrandeRange} from "@/config/distribute.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
myChartStyle: {
|
||
width: "550rpx",
|
||
height: "1000rpx",
|
||
margin: "120rpx 0 10rpx 70rpx",
|
||
}, //图表样式
|
||
gradeList:[],
|
||
gradeLists:[],
|
||
barList:[]
|
||
}
|
||
},
|
||
created(){
|
||
this.upDateCover2()
|
||
|
||
this.systemGrandeRange()
|
||
},
|
||
methods: {
|
||
systemGrandeRange() {
|
||
// 所有等级名称
|
||
systemGrandeRange().then((res) => {
|
||
let _barList = {id: [], name: [],color:[]}
|
||
res.data.forEach((item) => {
|
||
_barList.id.push(item.pkId)
|
||
_barList.name.push(item.gradeName)
|
||
_barList.color.push(item.color)
|
||
});
|
||
this.barList = _barList
|
||
})
|
||
},
|
||
sortBy(array, field, sort = "asc"){
|
||
const sortOpt = {
|
||
asc: (a, b, sortField) => a[sortField] - b[sortField],
|
||
desc: (a, b, sortField) => b[sortField] - a[sortField],
|
||
};
|
||
array.sort((a, b) => sortOpt[sort](a, b, field));
|
||
return array;
|
||
},
|
||
upDateCover2(val) {
|
||
api
|
||
.parentAchieveRight({
|
||
month:val? val.startDate :this.getStartTime(),
|
||
// startDate:val? val.startDate :this.getStartTime(),
|
||
// endDate: val?val.endDate:this.getEndTime(),
|
||
// startDate:val? val[0] :'2023-06-01',
|
||
// endDate: val?val[1]:'2023-06-29',
|
||
})
|
||
.then((res) => {
|
||
var arr= 0
|
||
res.data.list.forEach((item)=>{
|
||
item.name = item.pkGradeKeyVal
|
||
item.value = item.peopleNumber
|
||
item.color = item.color
|
||
arr+=item.peopleNumber
|
||
|
||
})
|
||
// 根据返回的value值重新进行排序
|
||
let lists =this.sortBy(res.data.list, "gradeValue")
|
||
lists.forEach((items)=>{
|
||
this.gradeList.push(items.color)
|
||
})
|
||
this.gradeLists = res.data.list
|
||
this.drawChart(res.data,res.data.list,arr)
|
||
})
|
||
},
|
||
getStartTime() {
|
||
let date = new Date()
|
||
date.setDate(1) // 将当前时间的日期设置成第一天
|
||
let year = date.getFullYear() // 得到当前年份
|
||
let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
|
||
month = month > 9 ? month : '0' + month // 补零
|
||
return year + '-' + month
|
||
},
|
||
getEndTime() {
|
||
var date = new Date();
|
||
var year = date.getFullYear() // 年
|
||
var month = date.getMonth() + 1; // 月
|
||
var day = date.getDate() >1 ?date.getDate()-1:date.getDate(); // 日
|
||
var hour = date.getHours(); // 时
|
||
var minutes = date.getMinutes(); // 分
|
||
var seconds = date.getSeconds() //秒
|
||
// 给一位数的数据前面加 “0”
|
||
if (month >= 1 && month <= 9) {
|
||
month = "0" + month;
|
||
}
|
||
if (day >= 0 && day <= 9) {
|
||
day = "0" + day;
|
||
}
|
||
if (hour >= 0 && hour <= 9) {
|
||
hour = "0" + hour;
|
||
}
|
||
if (minutes >= 0 && minutes <= 9) {
|
||
minutes = "0" + minutes;
|
||
}
|
||
if (seconds >= 0 && seconds <= 9) {
|
||
seconds = "0" + seconds;
|
||
}
|
||
return year + "-" + month + "-" + day + " "
|
||
},
|
||
drawChart(arr1, arr2,arr3) {
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
let myChart = echarts.init(document.getElementById('mounthData3'))
|
||
let that = this
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
// legend: {
|
||
// bottom: '0',
|
||
// width: '690rpx',
|
||
// // height: '300px',
|
||
// // itemGap: 15, //间隔
|
||
// itemWidth: 40, // 宽
|
||
// itemHeight: 20,// 高
|
||
// formatter: (name) => {
|
||
// // console.error(name)
|
||
// return name
|
||
// },
|
||
// },
|
||
series: [
|
||
{
|
||
top:"1%",
|
||
type: 'pie',
|
||
radius: ['50%', '100%'],
|
||
data: arr2,
|
||
color:that.gradeList,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 15,
|
||
lineHeight: 30,
|
||
formatter: function(data){
|
||
return (
|
||
data.data.name + ' ' +
|
||
data.data.peopleNumber +
|
||
that.$t('w_0337') +
|
||
"\n " +
|
||
that.$t('ENU_TOTAL_V_1') + ':' +
|
||
data.data.achieve+
|
||
"\n " +
|
||
that.$t('w_0338') + ':' +
|
||
Math.round((parseInt(data.data.peopleNumber)) / arr3 * 10000) / 100 + "%"
|
||
);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
],
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.item-s{
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// width: 100%;
|
||
line-height: 30px;
|
||
margin-left: 20rpx;
|
||
// margin-right: 20rpx;
|
||
}
|
||
.item-s:nth-child(1){
|
||
margin-left: 0;
|
||
}
|
||
.bg-color{
|
||
width: 40px;
|
||
height: 20px;
|
||
border-radius: 4px;
|
||
margin: 0 auto;
|
||
}
|
||
.flex-s{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
//align-items: center;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
//justify-content: center;
|
||
top: 150rpx;
|
||
// height: 80rpx;
|
||
// line-height: 80rpx;
|
||
}
|
||
.width-auto{
|
||
width: 690rpx;
|
||
position: relative;
|
||
height:1150rpx;
|
||
background-color: #fff;
|
||
|
||
border-radius: 20rpx;
|
||
margin: 20rpx auto;
|
||
}
|
||
.title{
|
||
padding: 20rpx 30rpx ;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-bottom: 10rpx solid #f3f3f3;
|
||
margin-top: 10rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
}
|
||
.left-s{
|
||
//margin-left:80rpx;
|
||
margin-top: 0px;
|
||
position: relative;
|
||
}
|
||
</style>
|