wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

能力统计

This commit is contained in:
gaoxiaolong 2022-06-23 16:35:53 +08:00
parent cd42aa29af
commit 538b6f14a4
4 changed files with 718 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
back/src/assets/img/TOP5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

110
back/src/views/modules/abilityStatistics/applicationResources.vue Normal file
View File

@ -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>

358
back/src/views/modules/abilityStatistics/componentServices.vue Normal file
View File

@ -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>

250
back/src/views/modules/abilityStatistics/index.vue Normal file
View File

@ -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>