From 814ed5ff92c01c27619162b3729b3e124156e470 Mon Sep 17 00:00:00 2001
From: gaoxiaolong <327091900@qq.com>
Date: Thu, 30 Jun 2022 17:53:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E5=8A=9B=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../applicationResources.vue                  | 610 ++++++++++++------
 .../abilityStatistics/componentServices.vue   | 593 ++++++++++-------
 .../views/modules/abilityStatistics/index.vue | 285 ++++----
 3 files changed, 949 insertions(+), 539 deletions(-)

diff --git a/back/src/views/modules/abilityStatistics/applicationResources.vue b/back/src/views/modules/abilityStatistics/applicationResources.vue
index 2c24531a..aea5855f 100644
--- a/back/src/views/modules/abilityStatistics/applicationResources.vue
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@@ -1,7 +1,11 @@
 <template>
     <div class='container'>
-        <span class='title-style'>应用资源</span>
-        <span class='page-introduction'>发布情况统计</span>
+        <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>
@@ -57,31 +61,215 @@
 import * as echarts from 'echarts';
 
 export default {
+      props:{
+        tableId:{
+            type:String,
+            default:''
+        },
+        fatherId:{
+            type:Number,
+            default:null,
+        }
+    },
     data(){
         return{
+            data2:[],
+            data3:[],
+            data4:[],
+            data5:[],
+            data6:[],
+            data7:[],
+            data8:[],
+            data9:[],
+            data10:[],
+            data11:[],
             colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),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:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
 
         }
+    },
+    created(){
+        this.getDistributedList()
+        this.getUsedList()
+        this.getTopList()
+        this.getApplicationDistribution()
+        this.getFieldDistribution()
+        this.getStatuesDistribution()
     },
      mounted(){
+        
         this.myEcharts1()
-        this.myEcharts2()
-        this.myEcharts3()
-        this.myEcharts4()
-        this.myEcharts6()
-        this.myEcharts7()
-        this.myEcharts8()
-        this.myEcharts9()
+        // this.myEcharts2()
+        // this.myEcharts3()
+        // this.myEcharts4()
+        // this.myEcharts6()
+        // this.myEcharts7()
+        // this.myEcharts8()
+        // this.myEcharts9()
   },
   methods:{
+      // 应用贡献组件数量分布（算法、图层、开发、业务）
+            getDistributedList () {               
+            this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
+                  params : {
+                    keyId:'1522550195034857476'
+                    // this.tableId
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.attr_value
+                    }
+                   this.data2.push(single)
+                   this.data5.push(single.value)
+                   this.data6.push(single.name)
+                   this.myEcharts2()
+                   this.myEcharts4()
+               })             
+            
+            })
+            },
+      // 应用贡献组件分别被多少应用使用
+            getUsedList () {               
+            this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
+                  params : {
+                    id:
+                    // '1522550195034857476'
+                    this.tableId
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.useNum,
+                        name:item.name
+                    }
+                   this.data3.push(single.name)
+                   this.data4.push(single.value)
+                   console.log("2222", this.data3);
+                   this.myEcharts3()
+               })             
+            
+            })
+            },
+            //评分分布12345
+            getTopList () {               
+            this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
+                  params : {
+                    id:this.tableId,
+                    // '1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.scoreNum,
+                        name:item.score
+                    }
+                   this.data8.push(single)
+                   this.myEcharts6()
+               })             
+            
+            })
+            },
+             //发布端应用分布情况
+            getApplicationDistribution() {               
+            this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.publisher
+                    }
+                   this.data7.push(single)
+                   this.myEcharts7()
+               })             
+            
+            })
+            },
+             //应用领域分布情况
+            getFieldDistribution() {               
+            this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.total,
+                        name:item.type
+                    }
+                   this.data9.push(single)
+                   this.myEcharts8()
+               })             
+            
+            })
+            },
+             //应用状态分布情况
+            getStatuesDistribution() {               
+            this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
+                  params : {
+                    id:
+                    // '1067246875800000066',
+                    this.tableId,
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                let arry=[]
+                arry=res.data.data
+                arry.forEach((item)=>{                   
+                    const single={
+                        value:item.num,
+                        name:item.state
+                    }
+                   this.data10.push(single)
+                   this.myEcharts9()
+               })             
+            
+            })
+            },
     myEcharts1(){
         var chartDom = document.getElementById('main1');
         var myChart = echarts.init(chartDom);
         var option;
         option = {
+            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
+                trigger: 'axis',
+                backgroundColor: 'rgba(32, 33, 36,.7)',
+                borderColor: 'rgba(32, 33, 36,0.20)',
+                borderWidth: 1,
+                textStyle: { // 文字提示样式
+                color: '#fff',
+                fontSize: '12'
+                },
+                axisPointer: { // 坐标轴虚线
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+                },
+            },
             grid: {		       
 		        bottom: '23%',
 		    },
@@ -231,12 +419,7 @@ export default {
             labelLine: {
                 show: false
             },
-            data: [
-                { value: 1048, name: '算法' },
-                { value: 735, name: '图层' },
-                { value: 580, name: '开发' },
-                { value: 484, name: '业务' },
-            ]
+            data:this.data2
             }
         ]
         };
@@ -248,12 +431,29 @@ export default {
         var myChart = echarts.init(chartDom);
         var option;
         option = {
+            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
+                trigger: 'axis',
+                backgroundColor: 'rgba(32, 33, 36,.7)',
+                borderColor: 'rgba(32, 33, 36,0.20)',
+                borderWidth: 1,
+                textStyle: { // 文字提示样式
+                color: '#fff',
+                fontSize: '12'
+                },
+                axisPointer: { // 坐标轴虚线
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+                },
+            },
             grid: {		       
 		        bottom: '23%',
 		    },
         xAxis: {
             type: 'category',
-            data: ['算法', '图层', '开发', '业务'],
+            data:this.data3,
+            fontSize:12,
             color:['#f5f5f5'],
             axisTick:{
               show:false,//不显示坐标轴刻度线
@@ -268,8 +468,17 @@ export default {
                 }
             },
             axisLabel: {//x轴文字的配置
+            formatter: val => {
+          let txt = val
+          if (val.length > 3) {
+            txt = val.substr(0, 3) + '...'
+          }
+          return txt
+            },
                 textStyle: {
                      color: "#999999",//x轴内容文字颜色
+                     
+
                 },
         },
         },
@@ -300,7 +509,7 @@ export default {
         },
         series: [
              {
-           data: [5, 5, 5, 5],
+            data: [1, 1, 1, 1, 1, 1],
             type: 'bar',
             barWidth: 14,
             stack: '1',
@@ -314,7 +523,7 @@ export default {
             },
             },
             {
-           data: [60, 90, 50, 80],
+           data: this.data4,
             type: 'bar',
             barWidth: 14,
             stack: '1',
@@ -343,7 +552,7 @@ export default {
 		    },
         xAxis: {
             type: 'category',
-            data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
+            data:this.data6,
             color:['#f5f5f5'],
             axisTick: {    // 坐标轴 刻度
                 show: false,  // 是否显示
@@ -404,7 +613,7 @@ export default {
             },
             },
              {
-           data: [60, 90, 50, 80, 50, 80],
+           data:this.data5,
             type: 'bar',
             barWidth: 14,
             stack: '1',
@@ -486,13 +695,7 @@ export default {
             labelLine: {
                 show: false
             },
-            data: [
-                { value: 1048, name: '1分' },
-                { value: 735, name: '2分' },
-                { value: 580, name: '3分' },
-                { value: 484, name: '4分' },
-                { value: 300, name: '5分' }
-            ]
+            data:this.data8
             }
         ]
         };
@@ -564,175 +767,197 @@ export default {
             labelLine: {
                 show: false
             },
-            data: [
-                { value: 1048, name: '应用名称1' },
-                { value: 735, name: '应用名称2' },
-                { value: 580, name: '应用名称3' },
-                { value: 484, name: '应用名称4' },
-                { value: 300, name: '应用名称5' }
-            ]
+            data:this.data7
+            //  [
+            //     { value: 1048, name: '应用名称1' },
+            //     { value: 735, name: '应用名称2' },
+            //     { value: 580, name: '应用名称3' },
+            //     { value: 484, name: '应用名称4' },
+            //     { value: 300, name: '应用名称5' }
+            // ]
             }
         ]
         };
 
         option && myChart.setOption(option);
             },
-    myEcharts8(){
-        var chartDom = document.getElementById('main8');
-        var myChart = echarts.init(chartDom);
-        var option;
-        option = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            orient: '',
-            top: '14%',
-            left: '40%',
-            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",
-            fontSize:12,
-            padding:[0,8,0,10]
-          },
-        },
-        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
-        series: [
-            {
-            type: 'pie',
-            radius: ['30%', '45%'],
-            center:['19%', '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: [
-                { value: 1048, name: '应用领域1' },
-                { value: 735, name: '应用领域2' },
-                { value: 580, name: '应用领域3' },
-                { value: 484, name: '应用领域4' },
-                { value: 300, name: '应用领域5' }
-            ]
-            }
-        ]
-        };
+            myEcharts8(){
+                var chartDom = document.getElementById('main8');
+                var myChart = echarts.init(chartDom);
+                var option;
+                option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                   orient: "vertical",   type: 'scroll',
+                    top: '14%',
+                    left: '40%',
+                    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: {
+                    color: "#666666",
+                    fontSize:12,
+                      rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+                    a: {
+                        // 设置文字、数学、英语这一列的样式
+                        width: 80,
+                        color: "#000000",
+                        fontSize: 12,
+                        fontWeight: "bolder",
+                    },
+                    b: {
+                        // 设置10分、20分、30分这一列的样式
+                        width: 35,
+                        color: "#333",
+                        fontSize: 12,
+                    },
+                },
+                    padding:[0,8,0,10]
+                },
+                },
+                color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+                series: [
+                    {
+                    type: 'pie',
+                    radius: ['30%', '45%'],
+                    center:['19%', '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.data9
+                    //  [
+                    //     { value: 1048, name: '应用领域1' },
+                    //     { value: 735, name: '应用领域2' },
+                    //     { value: 580, name: '应用领域3' },
+                    //     { value: 484, name: '应用领域4' },
+                    //     { value: 300, name: '应用领域5' }
+                    // ]
+                    }
+                ]
+                };
 
-        option && myChart.setOption(option);
-            },
-    myEcharts9(){
-        var chartDom = document.getElementById('main9');
-        var myChart = echarts.init(chartDom);
-        var option;
-        option = {
-        tooltip: {
-            trigger: 'item'
-        },
-        legend: {
-            orient: '',
-            top: '14%',
-            left: '47%',
-            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",
-            fontSize:12,
-            padding:[0,8,0,10]
-          },
-        },
-        color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
-        series: [
-            {
-            type: 'pie',
-            radius: ['30%', '45%'],
-            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: [
-                { value: 1048, name: '应用状态1' },
-                { value: 735, name: '应用状态2' },
-                { value: 580, name: '应用状态3' },
-                { value: 484, name: '应用状态4' },
-                { value: 300, name: '应用状态5' }
-            ]
-            }
-        ]
-        };
+                option && myChart.setOption(option);
+                    },
+            myEcharts9(){
+                var chartDom = document.getElementById('main9');
+                var myChart = echarts.init(chartDom);
+                var option;
+                option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: '',
+                    top: '14%',
+                    left: '47%',
+                    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",
+                    fontSize:12,
+                    padding:[0,8,0,10]
+                },
+                },
+                color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
+                series: [
+                    {
+                    type: 'pie',
+                    radius: ['30%', '45%'],
+                    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.data10
+                    //  [
+                    //     { value: 1048, name: '应用状态1' },
+                    //     { value: 735, name: '应用状态2' },
+                    //     { value: 580, name: '应用状态3' },
+                    //     { value: 484, name: '应用状态4' },
+                    //     { value: 300, name: '应用状态5' }
+                    // ]
+                    }
+                ]
+                };
 
-        option && myChart.setOption(option);
-            },
+                option && myChart.setOption(option);
+                    },
+             backBtn(){
+            this.$emit('closeApplication')
+        }
     }
 }
 </script>
@@ -740,6 +965,8 @@ export default {
 <style scoped>
 .container{
     padding-top: 15px;
+    display: flex;
+    flex-direction: column;
 }
     .title-style{
         font-size: 24px;
@@ -750,6 +977,13 @@ export default {
         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;
diff --git a/back/src/views/modules/abilityStatistics/componentServices.vue b/back/src/views/modules/abilityStatistics/componentServices.vue
index 8d754469..01c866bb 100644
--- a/back/src/views/modules/abilityStatistics/componentServices.vue
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@@ -1,7 +1,11 @@
 <template>
     <div class='container'>
-        <span class='title-style'>组件服务</span>
-        <span class='page-introduction'>发布情况统计</span>
+        <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>
@@ -26,7 +30,7 @@
                             <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.count}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                     </div>
                 </div>
             </div>
@@ -41,7 +45,7 @@
                             <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.count}}</span>
+                        <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
                     </div>
                 </div>
             </div>
@@ -57,258 +61,383 @@
 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:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
-            applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},]
+            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(){
-        this.myEcharts1()
-        this.myEcharts2()
-        this.myEcharts3()
+        
+       
     },
    methods:{
-    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(((tarValue / 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
+      // 评分发布情况
+        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()
+               })             
+            })            
+            
             },
-            label: {
-                show: false,
-                position: 'center'
+      // 算法图层开发业务
+        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()
+               })             
+            })            
+            
             },
-            // emphasis: {
-            //     label: {
-            //     show: true,
-            //     fontSize: '40',
-            //     fontWeight: 'bold'
-            //     }
-            // },
-            labelLine: {
-                show: false
+             // 应用领域分布
+        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()
+               })             
+            })            
+            
             },
-            data: [
-                { value: 1048, name: '1分' },
-                { value: 735, name: '2分' },
-                { value: 580, name: '3分' },
-                { value: 484, name: '4分' },
-                { value: 300, name: '5分' }
+     // 被调用组件及数量
+        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);
+            option && myChart.setOption(option);
+                },
+        myEcharts2(){
+            var chartDom = document.getElementById('main2');
+            var myChart = echarts.init(chartDom);
+            var option;
+            option = {
+            tooltip: {
+                trigger: 'item'
             },
-    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
+            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}%`;
             },
-            label: {
-                show: false,
-                position: 'center'
+            itemStyle:{},
+            textStyle: {
+                color: "#666666",
+                padding:[0,8,0,18]
             },
-            // emphasis: {
-            //     label: {
-            //     show: true,
-            //     fontSize: '40',
-            //     fontWeight: 'bold'
-            //     }
-            // },
-            labelLine: {
-                show: false
             },
-            data: [
-                { value: 1048, name: '算法' },
-                { value: 735, name: '图层' },
-                { value: 580, name: '开发' },
-                { value: 484, name: '业务' },
+            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);
+            option && myChart.setOption(option);
+                },
+        myEcharts3(){
+            var chartDom = document.getElementById('main3');
+            var myChart = echarts.init(chartDom);
+            var option;
+            option = {
+            tooltip: {
+                trigger: 'item'
             },
-    myEcharts3(){
-        var chartDom = document.getElementById('main3');
-        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
+            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]
+                },
             },
-            label: {
-                show: false,
-                position: 'center'
-            },
-            // emphasis: {
-            //     label: {
-            //     show: true,
-            //     fontSize: '40',
-            //     fontWeight: 'bold'
-            //     }
-            // },
-            labelLine: {
-                show: false
-            },
-            data: [
-                { value: 1048, name: '应用领域' },
-                { value: 735, name: '应用领域2' },
-                { value: 580, name: '应用领域3' },
-                { value: 484, name: '应用领域4' },
+            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);
-            }
+            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;
@@ -320,6 +449,13 @@ export default {
         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;
@@ -358,7 +494,9 @@ export default {
         padding-left: 20px;
         margin-top: 20px;
         margin-right: 20px;
-        /* background-image:url("../../../assets/img/排行榜背景图.png"); */
+        background-image:url("../../../assets/img/排行榜背景图.png"); 
+        background-repeat:no-repeat;
+        background-size: 100% 100%;
     }
     .container-body5{
         width:640px;
@@ -367,6 +505,9 @@ export default {
         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;
diff --git a/back/src/views/modules/abilityStatistics/index.vue b/back/src/views/modules/abilityStatistics/index.vue
index 21b7db82..75b8343a 100644
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -1,6 +1,7 @@
 <template>
-<div class='container'>
-    <div class='container-left'>
+<div >
+    <div class='container'>
+         <!-- <div class='container-left'  v-if='homeIsShow'>
         <div class='left-search'>
             <div>
                 <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
@@ -20,7 +21,7 @@
                 {{ node.label }}
            </span>
         </el-tree>
-    </div>
+         </div> -->
      <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
     <div class="mod-demand__bsdemand">
         <div class='top-box'>
@@ -41,51 +42,51 @@
          </div>
          <div class='line-style'></div>
           <el-table
-        :data="tableData"
-        border
-        style="width: 100%">
+            :data="tableData"
+            border
+            style="width: 100%">
         <el-table-column
-            prop="name"
+            prop="deptName"
             label="部门名称"
             min-width="100%">
         </el-table-column>
         <el-table-column
-            prop="releaseNum"
+            prop="resourceNum"
             label="发布总数"
             min-width="100%">
         </el-table-column>
-        <el-table-column
-            prop="applyNum"
+        <el-table-column v-if="this.choseId===0"
+            prop="resourceCarNum"
             label="被申请总数"
             min-width="100%">
         </el-table-column>
         <el-table-column
-            prop="browseNmu"
+            prop="resourceBrowseNum"
             label="浏览总量"
             min-width="100%">
         </el-table-column>
         <el-table-column
-            prop="collectNum"
+            prop="resourceCollectionNum"
             label="收藏量"
             min-width="100%">
         </el-table-column>
-        <el-table-column
-            prop="transferNum"
+        <el-table-column v-if="this.choseId===0"
+            prop="resourceVisits"
             label="被调用总数"
             min-width="100%">
         </el-table-column>
-        <el-table-column
-            prop="applicationNum"
+        <el-table-column v-if="this.choseId===0"
+            prop="resourceRelNum"
             label="被应用总数"
             min-width="100%">
         </el-table-column>
-        <el-table-column
-            prop="needApplicationNum"
+        <el-table-column v-if="this.choseId===0"
+            prop="resourceShareNum" 
             label="需申请数量"
             min-width="100%">
         </el-table-column>
-        <el-table-column
-            prop="reductionNum"
+        <el-table-column v-if="this.choseId===0"
+            prop="resourceShareNonNum"
             label="免批数量"
             min-width="100%">
         </el-table-column>
@@ -99,18 +100,19 @@
     </el-table>
     <div class="block">
     <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="getALLTree"
-      :current-page="currentPage4"
-      :page-sizes="[10, 20, 30, 40]"
+      @current-change="handleCurrentChange"
       layout="total, prev, pager, next, jumper"
-      :total="50">
+      :total="total"
+      :page-size="5"
+      :current-page="currentPage"
+      >
     </el-pagination>
   </div>
     </div>   
   </el-card>
-   <component-services v-if='servicesIsShow' ></component-services>
-   <application-resources  v-if='resourcesIsShow'></application-resources>
+    </div>
+   <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>
@@ -121,6 +123,8 @@ export default {
     data(){
         return{
             inputTxt:'',
+            tableId:'',
+            fatherId:'',
             treeData: [{
                 label: '一级 1',
                 children: [{
@@ -156,79 +160,48 @@ export default {
                     }]
                 }]
                 }],
+            total:null,
             defaultProps: {
             children: 'children',
             label: 'name'
             },
-            choseId:null,
+            choseId:0,
             departmentId:1,
-            currentPage4: 4,
+            currentPage: 1,
             homeIsShow:true,
             servicesIsShow:false,
             resourcesIsShow:false,
             titleList:[
                 {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
             ],
-            tableData: [{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },{
-                name: '部门名称一',
-                releaseNum: 111,
-                applyNum: 222,
-                browseNmu: 333,
-                collectNum:444,
-                transferNum:555,
-                applicationNum:666,
-                needApplicationNum:777,
-                reductionNum:888,
-                },
-            ]
+            tableData: []
         }
     },
     created(){
-        this.getALLTree()
+      
+        
+    },
+    mounted(){
+         this.getFirstTree()
     },
      methods: {
         //搜索框
-        searchBtn(){
-            this.getALLTree()
-        },
-         //树
-            handleNodeClick(data) {
-                console.log(data.name);
-                this.getTreeName(data)
-            },
+        // searchBtn(){
+        //     this.getALLTree()
+        // },
+        //  //树
+        //     handleNodeClick(data) {
+        //         console.log(data.name);
+        //         this.getTreeName(data)
+        //     },
+            //翻页
             handleCurrentChange(val){
-                this.getALLTree(val)
-
+                if(this.choseId===0){
+                     this.getFirstTree(val)
+                }
+               else if(this.choseId===1){
+                this.getReleaseTree(val)
+               }               
             },
              getTreeName (data) {               
                 this.$http.get('/census/center/v3/treeList/' ,{
@@ -242,78 +215,136 @@ export default {
                 this.tableData =res.data.data
             })
             },
-         // 获取部门列表
-            getALLTree () {               
-            this.$http.get('/census/center/v3/treeList/' ,{
-                  params : {
-                    keywords:this.inputTxt,
-                    deptId:'1067246875800000066',
-                    // pageNo: pageNo || 1,
-                    // pageSize: 20
-                    }                    
-            }).then(res => {
-                this.treeData =res.data.data
-                this.tableData =res.data.data
-            })
-            },
-          // 获取部门发布情况列表
-            getFirstTree () {               
+        //  // 获取部门列表
+        //     getALLTree () {               
+        //     this.$http.get('/census/center/v3/treeList/' ,{
+        //           params : {
+        //             keywords:this.inputTxt,
+        //             deptId:'1067246875800000066',
+        //             // pageNo: pageNo || 1,
+        //             // pageSize: 20
+        //             }                    
+        //     }).then(res => {
+        //         this.treeData =res.data.data
+        //         // this.tableData =res.data.data
+        //     })
+        //     },
+
+          // 组件服务部门发布情况
+            getFirstTree (page) {               
             this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
                   params : {
-                    limit:100,
-                    page:1,
-                    id:null,
-                    resourceType:'资源类型'
+                    page:page||1,
+                    limit:5,                  
+                    // id:'1067246875800000066',
+                    resourceType:'组件服务'
                     }                    
             }).then(res => {
-                this.tableData =res.data.data
-            
+                this.tableData =res.data.data.list
+                this.total = res.data.data.total            
             })
             },
-            // 获取部门使用情况列表
+            // 组件服务部门使用情况列表
             getSecondTree () {               
             this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
                   params : {
-                    keywords:'',
-                    deptId:'1067246875800000066',
-                    }                    
+                    limit:5,
+                    page:1,
+                    // id:'1067246875800000064',
+                    resourceType:'组件服务'
+                    }                     
             }).then(res => {
-                this.tableData =res.data.data
-                console.log('2222',this.tableData)
+                this.tableData =res.data.data.list
+            
+            })
+            },
+             // 应用资源部门发布情况列表
+            getReleaseTree (page) {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    limit:5,
+                    page:page||1,
+                    // id:'1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                this.tableData =res.data.data.list
+                this.total = res.data.data.total
+            
+            })
+            },
+            // 应用资源部门使用情况列表
+            getUsedTree () {               
+            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
+                  params : {
+                    limit:5,
+                    page:1,
+                    // id:'1067246875800000066',
+                    resourceType:'应用资源'
+                    }                     
+            }).then(res => {
+                this.tableData =res.data.data.list
             
             })
             },
       handleClick(row) {
-        console.log(row);
+        if(this.choseId===0){
+            this.homeIsShow=false
+            this.servicesIsShow=true
+            this.tableId=row.deptId
+            this.fatherId=1
+        }else if(this.choseId===1){
+            this.homeIsShow=false
+            this.resourcesIsShow=true
+            this.tableId=row.deptId
+            this.fatherId=2
+        }
+       
       },
       //选择组件
       choseBtn(index){
         this.choseId=index
-        if (index===0){
-            this.homeIsShow=false
-            this.servicesIsShow=true
-        } else if(index===1){
-            this.homeIsShow=false
-            this.servicesIsShow=false
-            this.resourcesIsShow=true
-        }
+        this.handleChose(1)
       },
+    //   choseBtn(index){
+    //     this.choseId=index
+    //     if (index===0){
+    //         this.homeIsShow=false
+    //         this.servicesIsShow=true
+    //     } else if(index===1){
+    //         this.homeIsShow=false
+    //         this.servicesIsShow=false
+    //         this.resourcesIsShow=true
+    //     }
+    //   },
       //选择发布or使用表格
       handleChose(index){
         this.departmentId=index
         if(index===1){
-            this.getFirstTree()
-        }
-        else{
-            this.getSecondTree()
+            if(this.choseId===0){
+                this.getFirstTree()
+            }else if(this.choseId===1){
+                this.getReleaseTree()
+            }            
+        }else if(index===2){
+             if(this.choseId===0){
+                this.getSecondTree()
+            }else{
+                this.getUsedTree()
+            }  
         }
       },
       //翻页
       handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
       },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
+      closeChild(){
+        this.homeIsShow=true
+        this.servicesIsShow=false
+      },
+       closeApplication(){
+        this.homeIsShow=true
+        this.resourcesIsShow=false
       }
     },
 
@@ -322,10 +353,12 @@ export default {
 <style lang="scss" scoped>
 .container{
     display: flex;
+
 }
 .container-left{
     width:250px;
     height:1000px;
+    display: inline-block;
     // background-color: #ffffff;
     margin-right:10px
 }
@@ -371,7 +404,9 @@ input::placeholder {
 
 .top-box{
     height:80px;
+    width:100%;
     background-color: #fafafc;
+    display: inline-block;
 }
     .title{
         display: flex;