hi-ucs/back/src/views/modules/abilityStatistics/componentServices.vue

<template>
    <div class='container'>
        <div>
            <span class='title-style'>组件服务</span>
            <span class='page-introduction'>发布情况统计</span>
            <button class='back-btn' @click="backBtn">返回</button>
        </div>
        
        <div class='container-body'>
            <div class='container-body1'>
                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
                <div id="main1" style="width: 400px;height:200px;"></div>
            </div>
            <div class='container-body2'>
                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
                <div id="main2" style="width: 400px;height:200px;"></div>
            </div>
            <div class='container-body3'>
                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
                <div id="main3" style="width: 400px;height:200px;"></div>
            </div>
             <div class='container-body4'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in usedList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
             <div class='container-body5'>
                <div style='margin-bottom:30px'>
                     <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
                      <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
                </div>
                <div v-for="(item,index) in applicationList" :key='index' >
                    <div style='display:flex'>
                        <div class='ranking-img' :style="{background:colorList[index%5],width:  widthList[index%5]}">
                            <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
                        </div>
                        <span class='num-style'>{{item.name}}</span>
                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class='footer'>
            <div class='footer-left' ></div>
            <span style='color:#b7c2d1;font-size:16px'>到底啦</span>
            <div class='footer-right'></div>
            </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    props:{
        tableId:{
            type:String,
            default:''
        },
        fatherId:{
            type:Number,
            default:null,
        }
    },
    data(){
        return{
            data1:[],
             data2: [
                // { value: 1048,name: '算法' },
                // { value: 735, name: '图层' },
                // { nums: 580, attr_value: '开发' },
                // { nums: 484, attr_value: '业务' },
            ],
              data3: [
                // { value: 1048,name: '算法' },
            ],
            colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
            widthList:['90px','80px','70px','60px','50px'],
            numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
            usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
            applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
        }
    },
    created(){
        if(this.fatherId===1){
            this.getBeCalled()
            this.getBeApplied()
            this.getAlgorithm()
            this.getDistributed()
            this.getScoreList()
        }else{

        }
       
    },
    mounted(){
        
       
    },
   methods:{
      // 评分发布情况
        getScoreList () {               
            this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"应用资源"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{
                    
                    const single={
                        value:item.scoreNum,
                        name:item.score
                    }
                    // const newList=[]
                   this.data1.push(single)
                    // this.data2=newList
                    this.myEcharts1()
               })             
            })            
            
            },
      // 算法图层开发业务
        getAlgorithm () {               
            this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"组件服务"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{
                    
                    const single={
                        value:item.nums,
                        name:item.attr_value
                    }
                    // const newList=[]
                   this.data2.push(single)
                    // this.data2=newList
                    this.myEcharts2()
               })             
            })            
            
            },
             // 应用领域分布
        getDistributed () {               
            this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
                  params : {
                  id:this.tableId,
                   resourceType:"应用资源"
                    }                    
            }).then(res => {
                let arry=[]
                arry=res.data.data
                arry.forEach((item)=>{                   
                    const single={
                        value:item.total,
                        name:item.type
                    }
                    const newList=[]
                    this.data3.push(single)
                    // this.data2=newList
                    this.myEcharts3()
               })             
            })            
            
            },
     // 被调用组件及数量
        getBeCalled () {               
            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
                  params : {
                  id:this.tableId,
                   resourceType:"应用资源"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                this.applicationList =res.data.data
            })
            },
        // 被申请组件及数量
        getBeApplied () {               
            this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
                  params : {
                   id:this.tableId,
                   resourceType:"组件服务"
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                this.applicationList =res.data.data
            })
            },
        myEcharts1(){
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: '',
                top: '14%',
                left: '55%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                // 使用回调函数
            formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                total += Number(data[i].value);
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
                }
                var v = tarValue;
                var p = Math.round(((v / total) * 100));
                return `${name}            ${p}%`;
            },
            itemStyle:{},
            textStyle: {
                color: "#666666",
                padding:[0,8,0,18]
            },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: this.data1
                }
            ]
            };

            option && myChart.setOption(option);
                },
        myEcharts2(){
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: '',
                top: '22%',
                left: '50%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                // 使用回调函数
            formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                total += Number(data[i].value);
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
                }
                var v = tarValue;
                var p = Math.round(((tarValue / total) * 100));
                return `${name}         ${p}%`;
            },
            itemStyle:{},
            textStyle: {
                color: "#666666",
                padding:[0,8,0,18]
            },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: this.data2
                }
            ]
            };

            option && myChart.setOption(option);
                },
        myEcharts3(){
            var chartDom = document.getElementById('main3');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
               orient: "vertical",   type: 'scroll',
                top: '22%',
                left: '50%',
                width:"auto",
                height:"auto",
                orient: "vertical",
                itemGap: 15,
                itemWidth: 14,
                
                    // 使用回调函数
                formatter: function(name) {
                    var data = option.series[0].data;
                    var total = 0;
                    var tarValue;
                    for (var i = 0; i < data.length; i++) {
                    total += Number(data[i].value);
                    if (data[i].name == name) {
                        tarValue = data[i].value;
                    }
                    }
                    var v = tarValue;
                    var p = Math.round(((tarValue / total) * 100));
                    return `{a|${name}}  {b|${p}%}`;
                },
                itemStyle:{},
                textStyle: {
                      rich: {
              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                    a: {
                        // 设置文字、数学、英语这一列的样式
                        width: 100,
                        color: "#666666",
                        fontSize: 12,
                        // fontWeight: "bolder",
                    },
                    b: {
                        // 设置10分、20分、30分这一列的样式
                        width: 35,
                        color: "#333",
                        fontSize: 12,
                    },
                },
                    color: "#666666",
                    backgroundColor: "transparent", 
                    padding:[0,8,0,18]
                },
            },
            color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
            series: [
                {
                // name: 'Access From',
                type: 'pie',
                radius: ['40%', '60%'],
                center:['22%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                // emphasis: {
                //     label: {
                //     show: true,
                //     fontSize: '40',
                //     fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data:this.data3
                }
            ]
            };

            option && myChart.setOption(option);
                },
        backBtn(){
            this.$emit('closeChild')
        }
   }
}
</script>
<style scoped>
.container{
    padding-top: 15px;
    display: flex;
    flex-direction: column;
}
    .title-style{
        font-size: 24px;
        color:#000000;
        font-weight: bold;
    }
    .page-introduction{
        font-size: 18px;
        color:#666666;
        margin-left: 20px;
    }
    .back-btn{
        background: #3e8ef7;
        border-color: rgba(101, 165, 249,0);
        color: #FFF;
        margin-left:1030px;
        padding-bottom: 3px;
    }
    .container-body{
        width:1300px;
        margin-top:30px;
        display: flex;
        flex-wrap:wrap
    }
    .container-body1{
        width:420px;
        height:250px;
        background-color: #ffffff;
        margin-right:20px;
        padding-top:20px;
        padding-left: 20px;
        
    }
    .container-body2{
        width:420px;
        height:250px;
        background-color: #ffffff;
        margin-right:20px;
        padding-top:20px;
        padding-left: 20px;
    }
    .container-body3{
        width:420px;
        height:250px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
    }
    .container-body4{
        width:640px;
        height:300px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
        margin-top: 20px;
        margin-right: 20px;
        background-image:url("../../../assets/img/排行榜背景图.png"); 
        background-repeat:no-repeat;
        background-size: 100% 100%;
    }
    .container-body5{
        width:640px;
        height:300px;
        background-color: #ffffff;
        padding-top:20px;
        padding-left: 20px;
        margin-top: 20px;
        background-image:url("../../../assets/img/排行榜背景图.png"); 
        background-repeat:no-repeat;
        background-size: 100% 100%;
    }
    .footer{
        display: flex;
        margin-top:50px;
        margin-left:365px;
    }
    .footer-left{
        width:250px;
        height:1px;
        background-color:#e0eaf8;
        margin-right:10px;
        margin-top:8px
    }
    .footer-right{
        width:250px;
        height:1px;
        background-color:#e0eaf8;
        margin-left:10px;
        margin-top:8px
    }
    .ranking-img{
        width:60px;
        height:26px;
        display: flex;
        line-height: 26px;
        margin-bottom:15px;
        margin-right:10px;
        padding-left: 15px;
    }
    .num-style{
         position:absolute;
         display: flex;
         margin-left:90px;
         margin-top:5px;
         color:#333333;
         font-size: 16px;        
    }   
    .count-style{
         position:absolute;
         display: flex;
         margin-left:400px;
         margin-top:5px;
         color:#333333;
         font-size: 18px;  
         font-weight: bold;      
    }
</style>