使用组件
This commit is contained in:
parent
e093ab7aab
commit
f47d964105
|
|
@ -0,0 +1,557 @@
|
|||
<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 += 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 += 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 += 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]
|
||||
},
|
||||
},
|
||||
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>
|
||||
|
|
@ -111,15 +111,18 @@
|
|||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used>
|
||||
<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>
|
||||
import componentServices from './componentServices.vue'
|
||||
import componentUsed from './componentUsed.vue'
|
||||
import applicationResources from './applicationResources.vue'
|
||||
import ComponentUsed from './componentUsed.vue'
|
||||
export default {
|
||||
components:{componentServices,applicationResources},
|
||||
components:{componentServices,applicationResources, ComponentUsed},
|
||||
data(){
|
||||
return{
|
||||
inputTxt:'',
|
||||
|
|
@ -171,6 +174,7 @@ export default {
|
|||
homeIsShow:true,
|
||||
servicesIsShow:false,
|
||||
resourcesIsShow:false,
|
||||
UsedIsShow:false,
|
||||
titleList:[
|
||||
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue