241 lines
7.8 KiB
Vue
241 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<div class="width-auto">
|
|||
|
|
<div class="title">{{$t('N_I_123')}}</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>
|