557 lines
18 KiB
Vue
557 lines
18 KiB
Vue
<template>
|
||
<div class='container'>
|
||
<div>
|
||
<span class='title-style'>组件服务</span>
|
||
<span class='page-introduction'>发布情况统计</span>
|
||
<button class='back-btn' @click="backBtn">返回</button>
|
||
</div>
|
||
|
||
<div class='container-body'>
|
||
<div class='container-body1'>
|
||
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||
<div id="main1" style="width: 400px;height:200px;"></div>
|
||
</div>
|
||
<div class='container-body2'>
|
||
<span style='font-size:18px;color;#000000;'>发布量情况分布</span>
|
||
<div id="main2" style="width: 400px;height:200px;"></div>
|
||
</div>
|
||
<div class='container-body3'>
|
||
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
|
||
<div id="main3" style="width: 400px;height:200px;"></div>
|
||
</div>
|
||
<div class='container-body4'>
|
||
<div style='margin-bottom:30px'>
|
||
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||
</div>
|
||
<div v-for="(item,index) in usedList" :key='index' >
|
||
<div style='display:flex'>
|
||
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||
</div>
|
||
<span class='num-style'>{{item.name}}</span>
|
||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='container-body5'>
|
||
<div style='margin-bottom:30px'>
|
||
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||
</div>
|
||
<div v-for="(item,index) in applicationList" :key='index' >
|
||
<div style='display:flex'>
|
||
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
|
||
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
|
||
</div>
|
||
<span class='num-style'>{{item.name}}</span>
|
||
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='footer'>
|
||
<div class='footer-left' ></div>
|
||
<span style='color:#b7c2d1;font-size:16px'>到底啦</span>
|
||
<div class='footer-right'></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
props:{
|
||
tableId:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
fatherId:{
|
||
type:Number,
|
||
default:null,
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
data1:[],
|
||
data2: [
|
||
// { value: 1048,name: '算法' },
|
||
// { value: 735, name: '图层' },
|
||
// { nums: 580, attr_value: '开发' },
|
||
// { nums: 484, attr_value: '业务' },
|
||
],
|
||
data3: [
|
||
// { value: 1048,name: '算法' },
|
||
],
|
||
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
|
||
widthList:['90px','80px','70px','60px','50px'],
|
||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
||
usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
|
||
applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
|
||
}
|
||
},
|
||
created(){
|
||
if(this.fatherId===1){
|
||
this.getBeCalled()
|
||
this.getBeApplied()
|
||
this.getAlgorithm()
|
||
this.getDistributed()
|
||
this.getScoreList()
|
||
}else{
|
||
|
||
}
|
||
|
||
},
|
||
mounted(){
|
||
|
||
|
||
},
|
||
methods:{
|
||
// 评分发布情况
|
||
getScoreList () {
|
||
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
|
||
params : {
|
||
id:this.tableId,
|
||
resourceType:"应用资源"
|
||
// pageNo: pageNo || 1,
|
||
// pageSize: 20
|
||
}
|
||
}).then(res => {
|
||
let arry=[]
|
||
arry=res.data.data
|
||
arry.forEach((item)=>{
|
||
|
||
const single={
|
||
value:item.scoreNum,
|
||
name:item.score
|
||
}
|
||
// const newList=[]
|
||
this.data1.push(single)
|
||
// this.data2=newList
|
||
this.myEcharts1()
|
||
})
|
||
})
|
||
|
||
},
|
||
// 算法图层开发业务
|
||
getAlgorithm () {
|
||
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
|
||
params : {
|
||
id:this.tableId,
|
||
resourceType:"组件服务"
|
||
// pageNo: pageNo || 1,
|
||
// pageSize: 20
|
||
}
|
||
}).then(res => {
|
||
let arry=[]
|
||
arry=res.data.data
|
||
arry.forEach((item)=>{
|
||
|
||
const single={
|
||
value:item.nums,
|
||
name:item.attr_value
|
||
}
|
||
// const newList=[]
|
||
this.data2.push(single)
|
||
// this.data2=newList
|
||
this.myEcharts2()
|
||
})
|
||
})
|
||
|
||
},
|
||
// 应用领域分布
|
||
getDistributed () {
|
||
this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
|
||
params : {
|
||
id:this.tableId,
|
||
resourceType:"应用资源"
|
||
}
|
||
}).then(res => {
|
||
let arry=[]
|
||
arry=res.data.data
|
||
arry.forEach((item)=>{
|
||
const single={
|
||
value:item.total,
|
||
name:item.type
|
||
}
|
||
const newList=[]
|
||
this.data3.push(single)
|
||
// this.data2=newList
|
||
this.myEcharts3()
|
||
})
|
||
})
|
||
|
||
},
|
||
// 被调用组件及数量
|
||
getBeCalled () {
|
||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||
params : {
|
||
id:this.tableId,
|
||
resourceType:"应用资源"
|
||
// pageNo: pageNo || 1,
|
||
// pageSize: 20
|
||
}
|
||
}).then(res => {
|
||
this.applicationList =res.data.data
|
||
})
|
||
},
|
||
// 被申请组件及数量
|
||
getBeApplied () {
|
||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||
params : {
|
||
id:this.tableId,
|
||
resourceType:"组件服务"
|
||
// pageNo: pageNo || 1,
|
||
// pageSize: 20
|
||
}
|
||
}).then(res => {
|
||
this.applicationList =res.data.data
|
||
})
|
||
},
|
||
myEcharts1(){
|
||
var chartDom = document.getElementById('main1');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: '',
|
||
top: '14%',
|
||
left: '55%',
|
||
width:"auto",
|
||
height:"auto",
|
||
orient: "vertical",
|
||
itemGap: 15,
|
||
itemWidth: 14,
|
||
// 使用回调函数
|
||
formatter: function(name) {
|
||
var data = option.series[0].data;
|
||
var total = 0;
|
||
var tarValue;
|
||
for (var i = 0; i < data.length; i++) {
|
||
total += Number(data[i].value);
|
||
if (data[i].name == name) {
|
||
tarValue = data[i].value;
|
||
}
|
||
}
|
||
var v = tarValue;
|
||
var p = Math.round(((v / total) * 100));
|
||
return `${name} ${p}%`;
|
||
},
|
||
itemStyle:{},
|
||
textStyle: {
|
||
color: "#666666",
|
||
padding:[0,8,0,18]
|
||
},
|
||
},
|
||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center:['22%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.data1
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
myEcharts2(){
|
||
var chartDom = document.getElementById('main2');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: '',
|
||
top: '22%',
|
||
left: '50%',
|
||
width:"auto",
|
||
height:"auto",
|
||
orient: "vertical",
|
||
itemGap: 15,
|
||
itemWidth: 14,
|
||
// 使用回调函数
|
||
formatter: function(name) {
|
||
var data = option.series[0].data;
|
||
var total = 0;
|
||
var tarValue;
|
||
for (var i = 0; i < data.length; i++) {
|
||
total += Number(data[i].value);
|
||
if (data[i].name == name) {
|
||
tarValue = data[i].value;
|
||
}
|
||
}
|
||
var v = tarValue;
|
||
var p = Math.round(((tarValue / total) * 100));
|
||
return `${name} ${p}%`;
|
||
},
|
||
itemStyle:{},
|
||
textStyle: {
|
||
color: "#666666",
|
||
padding:[0,8,0,18]
|
||
},
|
||
},
|
||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||
series: [
|
||
{
|
||
// name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center:['22%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: this.data2
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
myEcharts3(){
|
||
var chartDom = document.getElementById('main3');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: "vertical", type: 'scroll',
|
||
top: '22%',
|
||
left: '50%',
|
||
width:"auto",
|
||
height:"auto",
|
||
orient: "vertical",
|
||
itemGap: 15,
|
||
itemWidth: 14,
|
||
|
||
// 使用回调函数
|
||
formatter: function(name) {
|
||
var data = option.series[0].data;
|
||
var total = 0;
|
||
var tarValue;
|
||
for (var i = 0; i < data.length; i++) {
|
||
total += Number(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: "#666666",
|
||
fontSize: 12,
|
||
// fontWeight: "bolder",
|
||
},
|
||
b: {
|
||
// 设置10分、20分、30分这一列的样式
|
||
width: 35,
|
||
color: "#333",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
color: "#666666",
|
||
backgroundColor: "transparent",
|
||
padding:[0,8,0,18]
|
||
},
|
||
},
|
||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||
series: [
|
||
{
|
||
// name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center:['22%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// fontSize: '40',
|
||
// fontWeight: 'bold'
|
||
// }
|
||
// },
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data:this.data3
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
},
|
||
backBtn(){
|
||
this.$emit('closeChild')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.container{
|
||
padding-top: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.title-style{
|
||
font-size: 24px;
|
||
color:#000000;
|
||
font-weight: bold;
|
||
}
|
||
.page-introduction{
|
||
font-size: 18px;
|
||
color:#666666;
|
||
margin-left: 20px;
|
||
}
|
||
.back-btn{
|
||
background: #3e8ef7;
|
||
border-color: rgba(101, 165, 249,0);
|
||
color: #FFF;
|
||
margin-left:1030px;
|
||
padding-bottom: 3px;
|
||
}
|
||
.container-body{
|
||
width:1300px;
|
||
margin-top:30px;
|
||
display: flex;
|
||
flex-wrap:wrap
|
||
}
|
||
.container-body1{
|
||
width:420px;
|
||
height:250px;
|
||
background-color: #ffffff;
|
||
margin-right:20px;
|
||
padding-top:20px;
|
||
padding-left: 20px;
|
||
|
||
}
|
||
.container-body2{
|
||
width:420px;
|
||
height:250px;
|
||
background-color: #ffffff;
|
||
margin-right:20px;
|
||
padding-top:20px;
|
||
padding-left: 20px;
|
||
}
|
||
.container-body3{
|
||
width:420px;
|
||
height:250px;
|
||
background-color: #ffffff;
|
||
padding-top:20px;
|
||
padding-left: 20px;
|
||
}
|
||
.container-body4{
|
||
width:640px;
|
||
height:300px;
|
||
background-color: #ffffff;
|
||
padding-top:20px;
|
||
padding-left: 20px;
|
||
margin-top: 20px;
|
||
margin-right: 20px;
|
||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||
background-repeat:no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.container-body5{
|
||
width:640px;
|
||
height:300px;
|
||
background-color: #ffffff;
|
||
padding-top:20px;
|
||
padding-left: 20px;
|
||
margin-top: 20px;
|
||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||
background-repeat:no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.footer{
|
||
display: flex;
|
||
margin-top:50px;
|
||
margin-left:365px;
|
||
}
|
||
.footer-left{
|
||
width:250px;
|
||
height:1px;
|
||
background-color:#e0eaf8;
|
||
margin-right:10px;
|
||
margin-top:8px
|
||
}
|
||
.footer-right{
|
||
width:250px;
|
||
height:1px;
|
||
background-color:#e0eaf8;
|
||
margin-left:10px;
|
||
margin-top:8px
|
||
}
|
||
.ranking-img{
|
||
width:60px;
|
||
height:26px;
|
||
display: flex;
|
||
line-height: 26px;
|
||
margin-bottom:15px;
|
||
margin-right:10px;
|
||
padding-left: 15px;
|
||
}
|
||
.num-style{
|
||
position:absolute;
|
||
display: flex;
|
||
margin-left:90px;
|
||
margin-top:5px;
|
||
color:#333333;
|
||
font-size: 16px;
|
||
}
|
||
.count-style{
|
||
position:absolute;
|
||
display: flex;
|
||
margin-left:400px;
|
||
margin-top:5px;
|
||
color:#333333;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
</style> |