From 538b6f14a41d7871a36b87d67176b401405e9412 Mon Sep 17 00:00:00 2001
From: gaoxiaolong <327091900@qq.com>
Date: Thu, 23 Jun 2022 16:35:53 +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

---
 back/src/assets/img/TOP5.png                  | Bin 0 -> 2020 bytes
 .../applicationResources.vue                  | 110 ++++++
 .../abilityStatistics/componentServices.vue   | 358 ++++++++++++++++++
 .../views/modules/abilityStatistics/index.vue | 250 ++++++++++++
 4 files changed, 718 insertions(+)
 create mode 100644 back/src/assets/img/TOP5.png
 create mode 100644 back/src/views/modules/abilityStatistics/applicationResources.vue
 create mode 100644 back/src/views/modules/abilityStatistics/componentServices.vue
 create mode 100644 back/src/views/modules/abilityStatistics/index.vue

diff --git a/back/src/assets/img/TOP5.png b/back/src/assets/img/TOP5.png
new file mode 100644
index 0000000000000000000000000000000000000000..e43592f2066f58dd74bf9369f2a895a05d4211d5
GIT binary patch
literal 2020
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

literal 0
HcmV?d00001

diff --git a/back/src/views/modules/abilityStatistics/applicationResources.vue b/back/src/views/modules/abilityStatistics/applicationResources.vue
new file mode 100644
index 00000000..a44f8bb8
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/applicationResources.vue
@@ -0,0 +1,110 @@
+<template>
+    <div class='container'>
+        <span class='title-style'>应用资源</span>
+        <span class='page-introduction'>发布情况统计</span>
+        <div class='container-body'>
+            <div class='container-body1'>
+                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+            </div>
+            <div class='container-body2'>
+                <span style='font-size:18px;color;#000000;'>发布量情况分布</span>
+            </div>
+            <div class='container-body3'>
+                <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
+            </div>
+             <div class='container-body4'>
+                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
+                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+            </div>
+             <div class='container-body5'>
+                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
+                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+            </div>
+             <div class='container-body6'>
+                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+            </div>
+             <div class='container-body7'>
+                <span style='font-size:18px;color;#000000;'>评分发布情况</span>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+.container{
+    padding-top: 15px;
+}
+    .title-style{
+        font-size: 24px;
+        color:#000000;
+        font-weight: bold;
+    }
+    .page-introduction{
+        font-size: 18px;
+        color:#666666;
+        margin-left: 20px;
+    }
+    .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;
+    }
+    .container-body5{
+        width:640px;
+        height:300px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+     .container-body6{
+        width:420px;
+        height:250px;
+        background-color: #ffffff;
+        margin-right:20px;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+     .container-body7{
+        width:860px;
+        height:250px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/abilityStatistics/componentServices.vue b/back/src/views/modules/abilityStatistics/componentServices.vue
new file mode 100644
index 00000000..2ab65dfb
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/componentServices.vue
@@ -0,0 +1,358 @@
+<template>
+    <div class='container'>
+        <span class='title-style'>组件服务</span>
+        <span class='page-introduction'>发布情况统计</span>
+        <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'>
+                <span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
+                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+            </div>
+             <div class='container-body5'>
+                <span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
+                <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
+            </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 {
+    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
+            },
+            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);
+            },
+    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'
+            },
+            emphasis: {
+                label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold'
+                }
+            },
+            labelLine: {
+                show: false
+            },
+            data: [
+                { value: 1048, name: '算法' },
+                { value: 735, name: '图层' },
+                { value: 580, name: '开发' },
+                { value: 484, name: '业务' },
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            },
+    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
+            },
+            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' },
+            ]
+            }
+        ]
+        };
+
+        option && myChart.setOption(option);
+            }
+   }
+}
+</script>
+<style scoped>
+.container{
+    padding-top: 15px;
+}
+    .title-style{
+        font-size: 24px;
+        color:#000000;
+        font-weight: bold;
+    }
+    .page-introduction{
+        font-size: 18px;
+        color:#666666;
+        margin-left: 20px;
+    }
+    .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;
+    }
+    .container-body5{
+        width:640px;
+        height:300px;
+        background-color: #ffffff;
+        padding-top:20px;
+        padding-left: 20px;
+        margin-top: 20px;
+    }
+    .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
+    }
+</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
new file mode 100644
index 00000000..5d4a90f1
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -0,0 +1,250 @@
+<template>
+<div>
+     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>
+    <div class="mod-demand__bsdemand">
+        <div class='top-box'>
+            <span class='title'>能力统计</span>
+            <div class='title-list-style'>
+            <div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
+             <span class='box-style'>{{item.name}}</span>
+            </div>
+    </div>
+        </div>
+         <div class='second-title'>
+            <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
+                部门发布情况
+            </span>
+            <span :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
+                部门使用情况
+            </span>           
+         </div>
+         <div class='line-style'></div>
+          <el-table
+        :data="tableData"
+        border
+        style="width: 100%">
+        <el-table-column
+            prop="name"
+            label="部门名称"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="releaseNum"
+            label="发布总数"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="applyNum"
+            label="被申请总数"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="browseNmu"
+            label="浏览总量"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="collectNum"
+            label="收藏量"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="transferNum"
+            label="被调用总数"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="applicationNum"
+            label="被应用总数"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="needApplicationNum"
+            label="需申请数量"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            prop="reductionNum"
+            label="免批数量"
+            min-width="100%">
+        </el-table-column>
+        <el-table-column
+            label="操作"
+            min-width="92%">
+        <template slot-scope="scope">
+            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
+        </template>
+        </el-table-column>
+    </el-table>
+    <div class="block">
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage4"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, prev, pager, next, jumper"
+      :total="40">
+    </el-pagination>
+  </div>
+    </div>   
+  </el-card>
+   <component-services v-if='servicesIsShow' ></component-services>
+   <application-resources  v-if='resourcesIsShow'></application-resources>
+
+</div>
+ 
+  
+</template>
+<script>
+import componentServices from './componentServices.vue'
+import applicationResources from './applicationResources.vue'
+export default {
+    components:{componentServices,applicationResources},
+    data(){
+        return{
+            choseId:null,
+            departmentId:1,
+            currentPage4: 4,
+            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,
+                },
+            ]
+        }
+    },
+     methods: {
+      handleClick(row) {
+        console.log(row);
+      },
+      //选择组件
+      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
+      },
+      //翻页
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+    },
+
+}
+</script>
+<style lang="scss" scoped>
+.top-box{
+    height:80px;
+    background-color: #fafafc;
+}
+    .title{
+        display: flex;
+        font-size:20px;
+        color:#000000;
+        font-weight: bold;
+        padding-left:15px;
+        padding-top:10px;
+    }
+    .title-list-style{
+        display: flex;
+        margin-top:10px;
+        
+    }
+    .title-single{
+        font-size:14px;
+        width:90px;
+        color:#666666;
+        height:24px;
+        margin-left:10px;
+        border:1px solid #cccccc;
+        border-radius: 12px;
+        cursor:pointer
+       
+    }
+    .box-style{
+        width:90px;
+        height:24px;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 2px;
+    }
+    .second-title{
+        margin-top:20px;
+        font-size: 14px;
+        color:#979eb9;
+        cursor:pointer
+    }
+    .line-style{
+         width:100%;
+         height:1px;
+         background-color:#f5f6fa;
+         margin-top:15px;
+         margin-bottom:15px;
+    }
+   .aui-card--fill{
+        width:100% !important;
+        padding: 0px !important;
+    }
+    .choseStyle{
+        color:#526aff;
+        border:1px solid #526aff
+    }
+    .departmentStyle{
+        color:#526aff
+    }
+</style>