组件使用UI

back/src/views/modules/abilityStatistics/componentUsed.vue

@@ -2,22 +2,22 @@
     <div class='container'>
         <div>
             <span class='title-style'>组件服务</span>
-            <span class='page-introduction'>发布情况统计</span>
+            <span class='page-introduction'>使用情况统计</span>
             <button class='back-btn' @click="backBtn">返回</button>
         </div>
         
         <div class='container-body'>
-            <div class='container-body1'>
+            <!-- <div class='container-body1'>
                 <span style='font-size:18px;color;#000000;'>评分发布情况</span>
                 <div id="main1" style="width: 400px;height:200px;"></div>
-            </div>
+            </div> -->
             <div class='container-body2'>
-                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
+                <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>
+                <span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
-                <div id="main3" style="width: 400px;height:200px;"></div>
+                <div id="main8" style="width: 400px;height:200px;"></div>
             </div>
              <div class='container-body4'>
                 <div style='margin-bottom:30px'>
@@ -472,7 +472,7 @@ export default {
         
     }
     .container-body2{
-        width:420px;
+        width:640px;
         height:250px;
         background-color: #ffffff;
         margin-right:20px;
@@ -480,7 +480,7 @@ export default {
         padding-left: 20px;
     }
     .container-body3{
-        width:420px;
+        width:640px;
         height:250px;
         background-color: #ffffff;
         padding-top:20px;

back/src/views/modules/abilityStatistics/index.vue

@@ -36,7 +36,7 @@
             <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
                 部门发布情况
             </span>
-            <span :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
+            <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
                 部门使用情况
             </span>           
          </div>
@@ -178,7 +178,7 @@ export default {
             titleList:[
                 {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
             ],
-            tableData: []
+            tableData: [{deptName:'部门',resourceNum:222}]
         }
     },
     created(){
@@ -216,7 +216,7 @@ export default {
                     // pageSize: 20
                     }                    
             }).then(res => {
-                this.tableData =res.data.data
+                // this.tableData =res.data.data
             })
             },
         //  // 获取部门列表
@@ -244,7 +244,7 @@ export default {
                     resourceType:'组件服务'
                     }                    
             }).then(res => {
-                this.tableData =res.data.data.list
+                // this.tableData =res.data.data.list
                 this.total = res.data.data.total            
             })
             },
@@ -258,7 +258,7 @@ export default {
                     resourceType:'组件服务'
                     }                     
             }).then(res => {
-                this.tableData =res.data.data.list
+                // this.tableData =res.data.data.list
             
             })
             },
@@ -272,7 +272,7 @@ export default {
                     resourceType:'应用资源'
                     }                     
             }).then(res => {
-                this.tableData =res.data.data.list
+                // this.tableData =res.data.data.list
                 this.total = res.data.data.total
             
             })
@@ -287,22 +287,31 @@ export default {
                     resourceType:'应用资源'
                     }                     
             }).then(res => {
-                this.tableData =res.data.data.list
+                // this.tableData =res.data.data.list
             
             })
             },
       handleClick(row) {
         if(this.choseId===0){
-            this.homeIsShow=false
+            if(this.departmentId===1){
-            this.servicesIsShow=true
+                    this.homeIsShow=false
-            this.tableId=row.deptId
+                    this.servicesIsShow=true
-            this.fatherId=1
+                    this.tableId=row.deptId
-        }else if(this.choseId===1){
+                    this.fatherId=1
-            this.homeIsShow=false
+                }else if(this.departmentId===2){
-            this.resourcesIsShow=true
+                    this.homeIsShow=false
-            this.tableId=row.deptId
+                    this.UsedIsShow=true
-            this.fatherId=2
+                    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
+                }
+            }
+           
        
       },
       //选择组件