能力统计
This commit is contained in:
parent
702c685372
commit
814ed5ff92
|
|
@ -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: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||||
|
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: { // 鼠标悬浮提示框显示 X和Y 轴数据
|
||||||
|
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: {
|
||||||
},
|
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||||
},
|
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: {
|
// 设置10分、20分、30分这一列的样式
|
||||||
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;
|
||||||
|
|
|
||||||
|
|
@ -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: {
|
||||||
|
// 通过富文本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>
|
</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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue