能力统计

This commit is contained in:
gaoxiaolong 2022-06-30 17:53:39 +08:00
parent 702c685372
commit 814ed5ff92
3 changed files with 949 additions and 539 deletions

View File

@ -1,7 +1,11 @@
<template> <template>
<div class='container'> <div class='container'>
<span class='title-style'>应用资源</span> <div>
<span class='page-introduction'>发布情况统计</span> <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-body'>
<div class='container-body1'> <div class='container-body1'>
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span> <span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
@ -57,31 +61,215 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
props:{
tableId:{
type:String,
default:''
},
fatherId:{
type:Number,
default:null,
}
},
data(){ data(){
return{ return{
data2:[],
data3:[],
data4:[],
data5:[],
data6:[],
data7:[],
data8:[],
data9:[],
data10:[],
data11:[],
colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),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)',], colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),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'], widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},], usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
} }
},
created(){
this.getDistributedList()
this.getUsedList()
this.getTopList()
this.getApplicationDistribution()
this.getFieldDistribution()
this.getStatuesDistribution()
}, },
mounted(){ mounted(){
this.myEcharts1() this.myEcharts1()
this.myEcharts2() // this.myEcharts2()
this.myEcharts3() // this.myEcharts3()
this.myEcharts4() // this.myEcharts4()
this.myEcharts6() // this.myEcharts6()
this.myEcharts7() // this.myEcharts7()
this.myEcharts8() // this.myEcharts8()
this.myEcharts9() // this.myEcharts9()
}, },
methods:{ methods:{
//
getDistributedList () {
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
params : {
keyId:'1522550195034857476'
// this.tableId
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.attr_value
}
this.data2.push(single)
this.data5.push(single.value)
this.data6.push(single.name)
this.myEcharts2()
this.myEcharts4()
})
})
},
// 使
getUsedList () {
this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
params : {
id:
// '1522550195034857476'
this.tableId
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.useNum,
name:item.name
}
this.data3.push(single.name)
this.data4.push(single.value)
console.log("2222", this.data3);
this.myEcharts3()
})
})
},
//12345
getTopList () {
this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
params : {
id:this.tableId,
// '1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.scoreNum,
name:item.score
}
this.data8.push(single)
this.myEcharts6()
})
})
},
//
getApplicationDistribution() {
this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.publisher
}
this.data7.push(single)
this.myEcharts7()
})
})
},
//
getFieldDistribution() {
this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.total,
name:item.type
}
this.data9.push(single)
this.myEcharts8()
})
})
},
//
getStatuesDistribution() {
this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.state
}
this.data10.push(single)
this.myEcharts9()
})
})
},
myEcharts1(){ myEcharts1(){
var chartDom = document.getElementById('main1'); var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { // XY
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: { //
color: '#fff',
fontSize: '12'
},
axisPointer: { // 线
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
grid: { grid: {
bottom: '23%', bottom: '23%',
}, },
@ -231,12 +419,7 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data2
{ value: 1048, name: '算法' },
{ value: 735, name: '图层' },
{ value: 580, name: '开发' },
{ value: 484, name: '业务' },
]
} }
] ]
}; };
@ -248,12 +431,29 @@ export default {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { // XY
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: { //
color: '#fff',
fontSize: '12'
},
axisPointer: { // 线
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
grid: { grid: {
bottom: '23%', bottom: '23%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['算法', '图层', '开发', '业务'], data:this.data3,
fontSize:12,
color:['#f5f5f5'], color:['#f5f5f5'],
axisTick:{ axisTick:{
show:false,//线 show:false,//线
@ -268,8 +468,17 @@ export default {
} }
}, },
axisLabel: {//x axisLabel: {//x
formatter: val => {
let txt = val
if (val.length > 3) {
txt = val.substr(0, 3) + '...'
}
return txt
},
textStyle: { textStyle: {
color: "#999999",//x color: "#999999",//x
}, },
}, },
}, },
@ -300,7 +509,7 @@ export default {
}, },
series: [ series: [
{ {
data: [5, 5, 5, 5], data: [1, 1, 1, 1, 1, 1],
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1', stack: '1',
@ -314,7 +523,7 @@ export default {
}, },
}, },
{ {
data: [60, 90, 50, 80], data: this.data4,
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1', stack: '1',
@ -343,7 +552,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'], data:this.data6,
color:['#f5f5f5'], color:['#f5f5f5'],
axisTick: { // axisTick: { //
show: false, // show: false, //
@ -404,7 +613,7 @@ export default {
}, },
}, },
{ {
data: [60, 90, 50, 80, 50, 80], data:this.data5,
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1', stack: '1',
@ -486,13 +695,7 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data8
{ value: 1048, name: '1分' },
{ value: 735, name: '2分' },
{ value: 580, name: '3分' },
{ value: 484, name: '4分' },
{ value: 300, name: '5分' }
]
} }
] ]
}; };
@ -564,175 +767,197 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data7
{ value: 1048, name: '应用名称1' }, // [
{ value: 735, name: '应用名称2' }, // { value: 1048, name: '1' },
{ value: 580, name: '应用名称3' }, // { value: 735, name: '2' },
{ value: 484, name: '应用名称4' }, // { value: 580, name: '3' },
{ value: 300, name: '应用名称5' } // { value: 484, name: '4' },
] // { value: 300, name: '5' }
// ]
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
myEcharts8(){ myEcharts8(){
var chartDom = document.getElementById('main8'); var chartDom = document.getElementById('main8');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: '', orient: "vertical", type: 'scroll',
top: '14%', top: '14%',
left: '40%', left: '40%',
width:"auto", width:"auto",
height:"auto", height:"auto",
orient: "vertical", orient: "vertical",
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使 // 使
formatter: function(name) { formatter: function(name) {
var data = option.series[0].data; var data = option.series[0].data;
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += data[i].value;
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`; return `{a|${name}} {b|${p}%}`;
}, },
itemStyle:{}, itemStyle:{},
textStyle: { textStyle: {
color: "#666666", color: "#666666",
fontSize:12, fontSize:12,
padding:[0,8,0,10] rich: {
}, // richoneonetwotwothreethree""
}, a: {
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], //
series: [ width: 80,
{ color: "#000000",
type: 'pie', fontSize: 12,
radius: ['30%', '45%'], fontWeight: "bolder",
center:['19%', '50%'], },
avoidLabelOverlap: false, b: {
itemStyle: { // 102030
borderRadius: 10, width: 35,
borderColor: '#fff', color: "#333",
borderWidth: 2 fontSize: 12,
}, },
label: { },
show: false, padding:[0,8,0,10]
position: 'center' },
}, },
// emphasis: { color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
// label: { series: [
// show: true, {
// fontSize: '40', type: 'pie',
// fontWeight: 'bold' radius: ['30%', '45%'],
// } center:['19%', '50%'],
// }, avoidLabelOverlap: false,
labelLine: { itemStyle: {
show: false borderRadius: 10,
}, borderColor: '#fff',
data: [ borderWidth: 2
{ value: 1048, name: '应用领域1' }, },
{ value: 735, name: '应用领域2' }, label: {
{ value: 580, name: '应用领域3' }, show: false,
{ value: 484, name: '应用领域4' }, position: 'center'
{ value: 300, name: '应用领域5' } },
] // emphasis: {
} // label: {
] // show: true,
}; // fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data:this.data9
// [
// { value: 1048, name: '1' },
// { value: 735, name: '2' },
// { value: 580, name: '3' },
// { value: 484, name: '4' },
// { value: 300, name: '5' }
// ]
}
]
};
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
myEcharts9(){ myEcharts9(){
var chartDom = document.getElementById('main9'); var chartDom = document.getElementById('main9');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: '', orient: '',
top: '14%', top: '14%',
left: '47%', left: '47%',
width:"auto", width:"auto",
height:"auto", height:"auto",
orient: "vertical", orient: "vertical",
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使 // 使
formatter: function(name) { formatter: function(name) {
var data = option.series[0].data; var data = option.series[0].data;
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += data[i].value;
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`; return `${name} ${p}%`;
}, },
itemStyle:{}, itemStyle:{},
textStyle: { textStyle: {
color: "#666666", color: "#666666",
fontSize:12, fontSize:12,
padding:[0,8,0,10] padding:[0,8,0,10]
}, },
}, },
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['30%', '45%'], radius: ['30%', '45%'],
center:['22%', '50%'], center:['22%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: '#fff', borderColor: '#fff',
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: false, show: false,
position: 'center' position: 'center'
}, },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// fontSize: '40', // fontSize: '40',
// fontWeight: 'bold' // fontWeight: 'bold'
// } // }
// }, // },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data10
{ value: 1048, name: '应用状态1' }, // [
{ value: 735, name: '应用状态2' }, // { value: 1048, name: '1' },
{ value: 580, name: '应用状态3' }, // { value: 735, name: '2' },
{ value: 484, name: '应用状态4' }, // { value: 580, name: '3' },
{ value: 300, name: '应用状态5' } // { value: 484, name: '4' },
] // { value: 300, name: '5' }
} // ]
] }
}; ]
};
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
backBtn(){
this.$emit('closeApplication')
}
} }
} }
</script> </script>
@ -740,6 +965,8 @@ export default {
<style scoped> <style scoped>
.container{ .container{
padding-top: 15px; padding-top: 15px;
display: flex;
flex-direction: column;
} }
.title-style{ .title-style{
font-size: 24px; font-size: 24px;
@ -750,6 +977,13 @@ export default {
font-size: 18px; font-size: 18px;
color:#666666; color:#666666;
margin-left: 20px; margin-left: 20px;
}
.back-btn{
background: #3e8ef7;
border-color: rgba(101, 165, 249,0);
color: #FFF;
margin-left:1030px;
padding-bottom: 3px;
} }
.container-body{ .container-body{
width:1300px; width:1300px;

View File

@ -1,7 +1,11 @@
<template> <template>
<div class='container'> <div class='container'>
<span class='title-style'>组件服务</span> <div>
<span class='page-introduction'>发布情况统计</span> <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-body'>
<div class='container-body1'> <div class='container-body1'>
<span style='font-size:18px;color;#000000;'>评分发布情况</span> <span style='font-size:18px;color;#000000;'>评分发布情况</span>
@ -26,7 +30,7 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -41,7 +45,7 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -57,258 +61,383 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
props:{
tableId:{
type:String,
default:''
},
fatherId:{
type:Number,
default:null,
}
},
data(){ data(){
return{ 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)',], 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'], widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},], usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count: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(){ mounted(){
this.myEcharts1()
this.myEcharts2()
this.myEcharts3()
}, },
methods:{ methods:{
myEcharts1(){ //
var chartDom = document.getElementById('main1'); getScoreList () {
var myChart = echarts.init(chartDom); this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
var option; params : {
option = { id:this.tableId,
tooltip: { resourceType:"应用资源"
trigger: 'item' // pageNo: pageNo || 1,
}, // pageSize: 20
legend: { }
orient: '', }).then(res => {
top: '14%', let arry=[]
left: '55%', arry=res.data.data
width:"auto", arry.forEach((item)=>{
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); const single={
}, value:item.scoreNum,
myEcharts2(){ name:item.score
var chartDom = document.getElementById('main2'); }
var myChart = echarts.init(chartDom); // const newList=[]
var option; this.data1.push(single)
option = { // this.data2=newList
tooltip: { this.myEcharts1()
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'); getAlgorithm () {
var myChart = echarts.init(chartDom); this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
var option; params : {
option = { id:this.tableId,
tooltip: { resourceType:"组件服务"
trigger: 'item' // pageNo: pageNo || 1,
}, // pageSize: 20
legend: { }
orient: '', }).then(res => {
top: '22%', let arry=[]
left: '50%', arry=res.data.data
width:"auto", arry.forEach((item)=>{
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); 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: {
// richoneonetwotwothreethree""
a: {
//
width: 100,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
b: {
// 102030
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> </script>
<style scoped> <style scoped>
.container{ .container{
padding-top: 15px; padding-top: 15px;
display: flex;
flex-direction: column;
} }
.title-style{ .title-style{
font-size: 24px; font-size: 24px;
@ -320,6 +449,13 @@ export default {
color:#666666; color:#666666;
margin-left: 20px; margin-left: 20px;
} }
.back-btn{
background: #3e8ef7;
border-color: rgba(101, 165, 249,0);
color: #FFF;
margin-left:1030px;
padding-bottom: 3px;
}
.container-body{ .container-body{
width:1300px; width:1300px;
margin-top:30px; margin-top:30px;
@ -358,7 +494,9 @@ export default {
padding-left: 20px; padding-left: 20px;
margin-top: 20px; margin-top: 20px;
margin-right: 20px; margin-right: 20px;
/* background-image:url("../../../assets/img/排行榜背景图.png"); */ background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
} }
.container-body5{ .container-body5{
width:640px; width:640px;
@ -367,6 +505,9 @@ export default {
padding-top:20px; padding-top:20px;
padding-left: 20px; padding-left: 20px;
margin-top: 20px; margin-top: 20px;
background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
} }
.footer{ .footer{
display: flex; display: flex;

View File

@ -1,6 +1,7 @@
<template> <template>
<div class='container'> <div >
<div class='container-left'> <div class='container'>
<!-- <div class='container-left' v-if='homeIsShow'>
<div class='left-search'> <div class='left-search'>
<div> <div>
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt"> <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
@ -20,7 +21,7 @@
{{ node.label }} {{ node.label }}
</span> </span>
</el-tree> </el-tree>
</div> </div> -->
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'> <el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'>
<div class="mod-demand__bsdemand"> <div class="mod-demand__bsdemand">
<div class='top-box'> <div class='top-box'>
@ -41,51 +42,51 @@
</div> </div>
<div class='line-style'></div> <div class='line-style'></div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="name" prop="deptName"
label="部门名称" label="部门名称"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="releaseNum" prop="resourceNum"
label="发布总数" label="发布总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0"
prop="applyNum" prop="resourceCarNum"
label="被申请总数" label="被申请总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="browseNmu" prop="resourceBrowseNum"
label="浏览总量" label="浏览总量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="collectNum" prop="resourceCollectionNum"
label="收藏量" label="收藏量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0"
prop="transferNum" prop="resourceVisits"
label="被调用总数" label="被调用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0"
prop="applicationNum" prop="resourceRelNum"
label="被应用总数" label="被应用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0"
prop="needApplicationNum" prop="resourceShareNum"
label="需申请数量" label="需申请数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0"
prop="reductionNum" prop="resourceShareNonNum"
label="免批数量" label="免批数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
@ -99,18 +100,19 @@
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination <el-pagination
@size-change="handleSizeChange" @current-change="handleCurrentChange"
@current-change="getALLTree"
:current-page="currentPage4"
:page-sizes="[10, 20, 30, 40]"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="50"> :total="total"
:page-size="5"
:current-page="currentPage"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</el-card> </el-card>
<component-services v-if='servicesIsShow' ></component-services> </div>
<application-resources v-if='resourcesIsShow'></application-resources> <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> </div>
</template> </template>
<script> <script>
@ -121,6 +123,8 @@ export default {
data(){ data(){
return{ return{
inputTxt:'', inputTxt:'',
tableId:'',
fatherId:'',
treeData: [{ treeData: [{
label: '一级 1', label: '一级 1',
children: [{ children: [{
@ -156,79 +160,48 @@ export default {
}] }]
}] }]
}], }],
total:null,
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'name' label: 'name'
}, },
choseId:null, choseId:0,
departmentId:1, departmentId:1,
currentPage4: 4, currentPage: 1,
homeIsShow:true, homeIsShow:true,
servicesIsShow:false, servicesIsShow:false,
resourcesIsShow:false, resourcesIsShow:false,
titleList:[ titleList:[
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3}, {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
], ],
tableData: [{ 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,
},
]
} }
}, },
created(){ created(){
this.getALLTree()
},
mounted(){
this.getFirstTree()
}, },
methods: { methods: {
// //
searchBtn(){ // searchBtn(){
this.getALLTree() // this.getALLTree()
}, // },
// // //
handleNodeClick(data) { // handleNodeClick(data) {
console.log(data.name); // console.log(data.name);
this.getTreeName(data) // this.getTreeName(data)
}, // },
//
handleCurrentChange(val){ handleCurrentChange(val){
this.getALLTree(val) if(this.choseId===0){
this.getFirstTree(val)
}
else if(this.choseId===1){
this.getReleaseTree(val)
}
}, },
getTreeName (data) { getTreeName (data) {
this.$http.get('/census/center/v3/treeList/' ,{ this.$http.get('/census/center/v3/treeList/' ,{
@ -242,78 +215,136 @@ export default {
this.tableData =res.data.data this.tableData =res.data.data
}) })
}, },
// // //
getALLTree () { // getALLTree () {
this.$http.get('/census/center/v3/treeList/' ,{ // this.$http.get('/census/center/v3/treeList/' ,{
params : { // params : {
keywords:this.inputTxt, // keywords:this.inputTxt,
deptId:'1067246875800000066', // deptId:'1067246875800000066',
// pageNo: pageNo || 1, // // pageNo: pageNo || 1,
// pageSize: 20 // // pageSize: 20
} // }
}).then(res => { // }).then(res => {
this.treeData =res.data.data // this.treeData =res.data.data
this.tableData =res.data.data // // this.tableData =res.data.data
}) // })
}, // },
//
getFirstTree () { //
getFirstTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{ this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : { params : {
limit:100, page:page||1,
page:1, limit:5,
id:null, // id:'1067246875800000066',
resourceType:'资源类型' resourceType:'组件服务'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data this.tableData =res.data.data.list
this.total = res.data.data.total
}) })
}, },
// 使 // 使
getSecondTree () { getSecondTree () {
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{ this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
params : { params : {
keywords:'', limit:5,
deptId:'1067246875800000066', page:1,
// id:'1067246875800000064',
resourceType:'组件服务'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data this.tableData =res.data.data.list
console.log('2222',this.tableData)
})
},
//
getReleaseTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : {
limit:5,
page:page||1,
// id:'1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
this.tableData =res.data.data.list
this.total = res.data.data.total
})
},
// 使
getUsedTree () {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : {
limit:5,
page:1,
// id:'1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
this.tableData =res.data.data.list
}) })
}, },
handleClick(row) { handleClick(row) {
console.log(row); if(this.choseId===0){
this.homeIsShow=false
this.servicesIsShow=true
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
}
}, },
// //
choseBtn(index){ choseBtn(index){
this.choseId=index this.choseId=index
if (index===0){ this.handleChose(1)
this.homeIsShow=false
this.servicesIsShow=true
} else if(index===1){
this.homeIsShow=false
this.servicesIsShow=false
this.resourcesIsShow=true
}
}, },
// 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使 //or使
handleChose(index){ handleChose(index){
this.departmentId=index this.departmentId=index
if(index===1){ if(index===1){
this.getFirstTree() if(this.choseId===0){
} this.getFirstTree()
else{ }else if(this.choseId===1){
this.getSecondTree() this.getReleaseTree()
}
}else if(index===2){
if(this.choseId===0){
this.getSecondTree()
}else{
this.getUsedTree()
}
} }
}, },
// //
handleSizeChange(val) { handleSizeChange(val) {
console.log(`每页 ${val}`); console.log(`每页 ${val}`);
}, },
handleCurrentChange(val) { closeChild(){
console.log(`当前页: ${val}`); this.homeIsShow=true
this.servicesIsShow=false
},
closeApplication(){
this.homeIsShow=true
this.resourcesIsShow=false
} }
}, },
@ -322,10 +353,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container{ .container{
display: flex; display: flex;
} }
.container-left{ .container-left{
width:250px; width:250px;
height:1000px; height:1000px;
display: inline-block;
// background-color: #ffffff; // background-color: #ffffff;
margin-right:10px margin-right:10px
} }
@ -371,7 +404,9 @@ input::placeholder {
.top-box{ .top-box{
height:80px; height:80px;
width:100%;
background-color: #fafafc; background-color: #fafafc;
display: inline-block;
} }
.title{ .title{
display: flex; display: flex;