From f47d9641053be15853704bc498a57b5efc686204 Mon Sep 17 00:00:00 2001
From: gaoxiaolong <327091900@qq.com>
Date: Fri, 1 Jul 2022 09:16:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../abilityStatistics/componentUsed.vue       | 557 ++++++++++++++++++
 .../views/modules/abilityStatistics/index.vue |   6 +-
 2 files changed, 562 insertions(+), 1 deletion(-)
 create mode 100644 back/src/views/modules/abilityStatistics/componentUsed.vue

diff --git a/back/src/views/modules/abilityStatistics/componentUsed.vue b/back/src/views/modules/abilityStatistics/componentUsed.vue
new file mode 100644
index 00000000..01c866bb
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/componentUsed.vue
@@ -0,0 +1,557 @@
+<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 += 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 += 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 += 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: "#000000",
+                        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>
\ No newline at end of file
diff --git a/back/src/views/modules/abilityStatistics/index.vue b/back/src/views/modules/abilityStatistics/index.vue
index 75b8343a..ba73d740 100644
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -111,15 +111,18 @@
     </div>   
   </el-card>
     </div>
+   <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used>
    <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
    <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
 </div>  
 </template>
 <script>
 import componentServices from './componentServices.vue'
+import componentUsed from './componentUsed.vue'
 import applicationResources from './applicationResources.vue'
+import ComponentUsed from './componentUsed.vue'
 export default {
-    components:{componentServices,applicationResources},
+    components:{componentServices,applicationResources, ComponentUsed},
     data(){
         return{
             inputTxt:'',
@@ -171,6 +174,7 @@ export default {
             homeIsShow:true,
             servicesIsShow:false,
             resourcesIsShow:false,
+            UsedIsShow:false,
             titleList:[
                 {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
             ],