后台加overflow: hidden;
This commit is contained in:
parent
52ece255f3
commit
cc633449ed
|
@ -5,7 +5,7 @@
|
||||||
<span class='page-introduction'>使用情况统计</span>
|
<span class='page-introduction'>使用情况统计</span>
|
||||||
<button class='back-btn' @click="backBtn">返回</button>
|
<button class='back-btn' @click="backBtn">返回</button>
|
||||||
</div>
|
</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>
|
||||||
|
@ -58,503 +58,497 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props:{
|
props: {
|
||||||
tableId:{
|
tableId: {
|
||||||
type:String,
|
type: String,
|
||||||
default:''
|
default: ''
|
||||||
|
},
|
||||||
|
fatherId: {
|
||||||
|
type: Number,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data1: [],
|
||||||
|
data2: [
|
||||||
|
// { value: 1048,name: '算法' },
|
||||||
|
// { value: 735, name: '图层' },
|
||||||
|
// { nums: 580, attr_value: '开发' },
|
||||||
|
// { nums: 484, attr_value: '业务' },
|
||||||
|
],
|
||||||
|
data3: [
|
||||||
|
// { value: 1048,name: '算法' },
|
||||||
|
],
|
||||||
|
colorList: ['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)', 'linear-gradient(to right,rgba(250, 179, 2,.6),transparent)', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent)'],
|
||||||
|
widthList: ['90px', '80px', '70px', '60px', '50px'],
|
||||||
|
numColorList: ['#fc5656', '#ff8a00', '#f9af0a', '#808fff', '#808fff'],
|
||||||
|
usedList: [{ name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称一', useNum: 111 }, { name: '组件名称四', useNum: 111 }, { name: '组件名称五', useNum: 111 }],
|
||||||
|
applicationList: [{ name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称四', score: 111 }, { name: '组件名称五', score: 111 }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
if (this.fatherId === 1) {
|
||||||
|
this.getBeCalled()
|
||||||
|
this.getBeApplied()
|
||||||
|
this.getAlgorithm()
|
||||||
|
this.getDistributed()
|
||||||
|
this.getScoreList()
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 评分发布情况
|
||||||
|
getScoreList () {
|
||||||
|
this.$http.get('/census/center/v3/assemblerScoreInfo', {
|
||||||
|
params: {
|
||||||
|
id: this.tableId,
|
||||||
|
resourceType: '应用资源'
|
||||||
|
// pageNo: pageNo || 1,
|
||||||
|
// pageSize: 20
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let arry = []
|
||||||
|
arry = res.data.data
|
||||||
|
arry.forEach((item) => {
|
||||||
|
const single = {
|
||||||
|
value: item.scoreNum,
|
||||||
|
name: item.score
|
||||||
|
}
|
||||||
|
// const newList=[]
|
||||||
|
this.data1.push(single)
|
||||||
|
// this.data2=newList
|
||||||
|
this.myEcharts1()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 算法图层开发业务
|
||||||
|
getAlgorithm () {
|
||||||
|
this.$http.get('/census/center/v3/assemblerUsedInfo', {
|
||||||
|
params: {
|
||||||
|
id: this.tableId,
|
||||||
|
resourceType: '组件服务'
|
||||||
|
// pageNo: pageNo || 1,
|
||||||
|
// pageSize: 20
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let arry = []
|
||||||
|
arry = res.data.data
|
||||||
|
arry.forEach((item) => {
|
||||||
|
const single = {
|
||||||
|
value: item.nums,
|
||||||
|
name: item.attr_value
|
||||||
|
}
|
||||||
|
// const newList=[]
|
||||||
|
this.data2.push(single)
|
||||||
|
// this.data2=newList
|
||||||
|
this.myEcharts2()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 应用领域分布
|
||||||
|
getDistributed () {
|
||||||
|
this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList', {
|
||||||
|
params: {
|
||||||
|
id: this.tableId,
|
||||||
|
resourceType: '组件服务'
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let arry = []
|
||||||
|
arry = res.data.data
|
||||||
|
arry.forEach((item) => {
|
||||||
|
const single = {
|
||||||
|
value: item.total,
|
||||||
|
name: item.type
|
||||||
|
}
|
||||||
|
this.data3.push(single)
|
||||||
|
this.myEcharts3()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// top5使用组件
|
||||||
|
getBeCalled () {
|
||||||
|
this.$http.get('/census/center/v3/assemblerUseTopInfo', {
|
||||||
|
params: {
|
||||||
|
id: this.tableId,
|
||||||
|
resourceType: '组件服务'
|
||||||
|
// pageNo: pageNo || 1,
|
||||||
|
// pageSize: 20
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
this.usedList = res.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 使用组件评分5
|
||||||
|
getBeApplied () {
|
||||||
|
this.$http.get('/census/center/v3/assemblerUseScoreTopInfo', {
|
||||||
|
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'
|
||||||
},
|
},
|
||||||
fatherId:{
|
legend: {
|
||||||
type:Number,
|
orient: '',
|
||||||
default:null,
|
top: '14%',
|
||||||
}
|
left: '55%',
|
||||||
},
|
width: 'auto',
|
||||||
data(){
|
height: 'auto',
|
||||||
return{
|
orient: 'vertical',
|
||||||
data1:[],
|
itemGap: 15,
|
||||||
data2: [
|
itemWidth: 14,
|
||||||
// { value: 1048,name: '算法' },
|
// 使用回调函数
|
||||||
// { value: 735, name: '图层' },
|
formatter: function (name) {
|
||||||
// { nums: 580, attr_value: '开发' },
|
var data = option.series[0].data
|
||||||
// { nums: 484, attr_value: '业务' },
|
var total = 0
|
||||||
],
|
var tarValue
|
||||||
data3: [
|
for (var i = 0; i < data.length; i++) {
|
||||||
// { value: 1048,name: '算法' },
|
total += Number(data[i].value)
|
||||||
],
|
if (data[i].name == 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)',],
|
tarValue = data[i].value
|
||||||
widthList:['90px','80px','70px','60px','50px'],
|
}
|
||||||
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
|
}
|
||||||
usedList:[{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},],
|
var v = tarValue
|
||||||
applicationList:[{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称四',score:111},{name:'组件名称五',score:111},]
|
var p = Math.round(((v / total) * 100))
|
||||||
}
|
return `${name} ${p}%`
|
||||||
},
|
},
|
||||||
created(){
|
itemStyle: {},
|
||||||
if(this.fatherId===1){
|
textStyle: {
|
||||||
this.getBeCalled()
|
color: '#666666',
|
||||||
this.getBeApplied()
|
padding: [0, 8, 0, 18]
|
||||||
this.getAlgorithm()
|
}
|
||||||
this.getDistributed()
|
},
|
||||||
this.getScoreList()
|
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||||
}else{
|
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)
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted(){
|
myEcharts2 () {
|
||||||
|
var chartDom = document.getElementById('main2')
|
||||||
|
var myChart = echarts.init(chartDom)
|
||||||
|
var option
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: '',
|
||||||
|
top: '22%',
|
||||||
|
left: '50%',
|
||||||
|
width: 'auto',
|
||||||
|
height: 'auto',
|
||||||
|
orient: 'vertical',
|
||||||
|
itemGap: 15,
|
||||||
|
itemWidth: 14,
|
||||||
|
// 使用回调函数
|
||||||
|
formatter: function (name) {
|
||||||
|
var data = option.series[0].data
|
||||||
|
var total = 0
|
||||||
|
var tarValue
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
total += Number(data[i].value)
|
||||||
|
if (data[i].name == name) {
|
||||||
|
tarValue = data[i].value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var v = tarValue
|
||||||
|
var p = Math.round(((tarValue / total) * 100))
|
||||||
|
return `${name} ${p}%`
|
||||||
|
},
|
||||||
|
itemStyle: {},
|
||||||
|
textStyle: {
|
||||||
|
color: '#666666',
|
||||||
|
padding: [0, 8, 0, 18]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '60%'],
|
||||||
|
center: ['22%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: this.data2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
option && myChart.setOption(option)
|
||||||
},
|
},
|
||||||
methods:{
|
myEcharts3 () {
|
||||||
// 评分发布情况
|
var chartDom = document.getElementById('main3')
|
||||||
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: 'vertical',
|
||||||
}).then(res => {
|
type: 'scroll',
|
||||||
let arry=[]
|
top: '22%',
|
||||||
arry=res.data.data
|
left: '50%',
|
||||||
arry.forEach((item)=>{
|
width: 'auto',
|
||||||
|
height: 'auto',
|
||||||
const single={
|
orient: 'vertical',
|
||||||
value:item.scoreNum,
|
itemGap: 15,
|
||||||
name:item.score
|
itemWidth: 14,
|
||||||
}
|
|
||||||
// const newList=[]
|
|
||||||
this.data1.push(single)
|
|
||||||
// this.data2=newList
|
|
||||||
this.myEcharts1()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
// 算法图层开发业务
|
|
||||||
getAlgorithm () {
|
|
||||||
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
|
|
||||||
params : {
|
|
||||||
id:this.tableId,
|
|
||||||
resourceType:"组件服务"
|
|
||||||
// pageNo: pageNo || 1,
|
|
||||||
// pageSize: 20
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
let arry=[]
|
|
||||||
arry=res.data.data
|
|
||||||
arry.forEach((item)=>{
|
|
||||||
|
|
||||||
const single={
|
|
||||||
value:item.nums,
|
|
||||||
name:item.attr_value
|
|
||||||
}
|
|
||||||
// const newList=[]
|
|
||||||
this.data2.push(single)
|
|
||||||
// this.data2=newList
|
|
||||||
this.myEcharts2()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
// 应用领域分布
|
|
||||||
getDistributed () {
|
|
||||||
this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{
|
|
||||||
params : {
|
|
||||||
id:this.tableId,
|
|
||||||
resourceType:"组件服务"
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
let arry=[]
|
|
||||||
arry=res.data.data
|
|
||||||
arry.forEach((item)=>{
|
|
||||||
const single={
|
|
||||||
value:item.total,
|
|
||||||
name:item.type
|
|
||||||
}
|
|
||||||
this.data3.push(single)
|
|
||||||
this.myEcharts3()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
// top5使用组件
|
|
||||||
getBeCalled () {
|
|
||||||
this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{
|
|
||||||
params : {
|
|
||||||
id:this.tableId,
|
|
||||||
resourceType:"组件服务"
|
|
||||||
// pageNo: pageNo || 1,
|
|
||||||
// pageSize: 20
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.usedList =res.data.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 使用组件评分5
|
|
||||||
getBeApplied () {
|
|
||||||
this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{
|
|
||||||
params : {
|
|
||||||
id:this.tableId,
|
|
||||||
resourceType:"应用资源"
|
|
||||||
// pageNo: pageNo || 1,
|
|
||||||
// pageSize: 20
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.applicationList =res.data.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
myEcharts1(){
|
|
||||||
var chartDom = document.getElementById('main1');
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: '',
|
|
||||||
top: '14%',
|
|
||||||
left: '55%',
|
|
||||||
width:"auto",
|
|
||||||
height:"auto",
|
|
||||||
orient: "vertical",
|
|
||||||
itemGap: 15,
|
|
||||||
itemWidth: 14,
|
|
||||||
// 使用回调函数
|
|
||||||
formatter: function(name) {
|
|
||||||
var data = option.series[0].data;
|
|
||||||
var total = 0;
|
|
||||||
var tarValue;
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
total += Number(data[i].value);
|
|
||||||
if (data[i].name == name) {
|
|
||||||
tarValue = data[i].value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var v = tarValue;
|
|
||||||
var p = Math.round(((v / total) * 100));
|
|
||||||
return `${name} ${p}%`;
|
|
||||||
},
|
|
||||||
itemStyle:{},
|
|
||||||
textStyle: {
|
|
||||||
color: "#666666",
|
|
||||||
padding:[0,8,0,18]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '60%'],
|
|
||||||
center:['22%', '50%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: this.data1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
// 使用回调函数
|
||||||
},
|
formatter: function (name) {
|
||||||
myEcharts2(){
|
var data = option.series[0].data
|
||||||
var chartDom = document.getElementById('main2');
|
var total = 0
|
||||||
var myChart = echarts.init(chartDom);
|
var tarValue
|
||||||
var option;
|
for (var i = 0; i < data.length; i++) {
|
||||||
option = {
|
total += Number(data[i].value)
|
||||||
tooltip: {
|
if (data[i].name == name) {
|
||||||
trigger: 'item'
|
tarValue = data[i].value
|
||||||
},
|
}
|
||||||
legend: {
|
}
|
||||||
orient: '',
|
// var v = tarValue;
|
||||||
top: '22%',
|
var p = Math.round(((tarValue / total) * 100))
|
||||||
left: '50%',
|
console.log('@@@@', tarValue, total)
|
||||||
width:"auto",
|
return `{a|${name}} {b|${p}%}`
|
||||||
height:"auto",
|
},
|
||||||
orient: "vertical",
|
itemStyle: {},
|
||||||
itemGap: 15,
|
textStyle: {
|
||||||
itemWidth: 14,
|
rich: {
|
||||||
// 使用回调函数
|
|
||||||
formatter: function(name) {
|
|
||||||
var data = option.series[0].data;
|
|
||||||
var total = 0;
|
|
||||||
var tarValue;
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
total += Number(data[i].value);
|
|
||||||
if (data[i].name == name) {
|
|
||||||
tarValue = data[i].value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var v = tarValue;
|
|
||||||
var p = Math.round(((tarValue / total) * 100));
|
|
||||||
return `${name} ${p}%`;
|
|
||||||
},
|
|
||||||
itemStyle:{},
|
|
||||||
textStyle: {
|
|
||||||
color: "#666666",
|
|
||||||
padding:[0,8,0,18]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// name: 'Access From',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '60%'],
|
|
||||||
center:['22%', '50%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: this.data2
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
},
|
|
||||||
myEcharts3(){
|
|
||||||
var chartDom = document.getElementById('main3');
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
var option;
|
|
||||||
option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: "vertical", type: 'scroll',
|
|
||||||
top: '22%',
|
|
||||||
left: '50%',
|
|
||||||
width:"auto",
|
|
||||||
height:"auto",
|
|
||||||
orient: "vertical",
|
|
||||||
itemGap: 15,
|
|
||||||
itemWidth: 14,
|
|
||||||
|
|
||||||
// 使用回调函数
|
|
||||||
formatter: function(name) {
|
|
||||||
var data = option.series[0].data;
|
|
||||||
var total = 0;
|
|
||||||
var tarValue;
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
total += Number(data[i].value);
|
|
||||||
if (data[i].name == name) {
|
|
||||||
tarValue = data[i].value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// var v = tarValue;
|
|
||||||
var p = Math.round(((tarValue / total) * 100));
|
|
||||||
console.log('@@@@', tarValue, total)
|
|
||||||
return `{a|${name}} {b|${p}%}`;
|
|
||||||
},
|
|
||||||
itemStyle:{},
|
|
||||||
textStyle: {
|
|
||||||
rich: {
|
|
||||||
// 通过富文本rich给每个项设置样式,下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
// 通过富文本rich给每个项设置样式,下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||||
a: {
|
a: {
|
||||||
// 设置文字、数学、英语这一列的样式
|
// 设置文字、数学、英语这一列的样式
|
||||||
width: 100,
|
width: 100,
|
||||||
color: "#000000",
|
color: '#000000',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontWeight: "bolder",
|
fontWeight: 'bolder'
|
||||||
},
|
},
|
||||||
b: {
|
b: {
|
||||||
// 设置10分、20分、30分这一列的样式
|
// 设置10分、20分、30分这一列的样式
|
||||||
width: 35,
|
width: 35,
|
||||||
color: "#333",
|
color: '#333',
|
||||||
fontSize: 12,
|
fontSize: 12
|
||||||
},
|
}
|
||||||
},
|
|
||||||
color: "#666666",
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
padding:[0,8,0,18]
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
color: '#666666',
|
||||||
series: [
|
backgroundColor: 'transparent',
|
||||||
{
|
padding: [0, 8, 0, 18]
|
||||||
// name: 'Access From',
|
}
|
||||||
type: 'pie',
|
},
|
||||||
radius: ['40%', '60%'],
|
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||||
center:['22%', '50%'],
|
series: [
|
||||||
avoidLabelOverlap: false,
|
{
|
||||||
itemStyle: {
|
// name: 'Access From',
|
||||||
borderRadius: 10,
|
type: 'pie',
|
||||||
borderColor: '#fff',
|
radius: ['40%', '60%'],
|
||||||
borderWidth: 2
|
center: ['22%', '50%'],
|
||||||
},
|
avoidLabelOverlap: false,
|
||||||
label: {
|
itemStyle: {
|
||||||
show: false,
|
borderRadius: 10,
|
||||||
position: 'center'
|
borderColor: '#fff',
|
||||||
},
|
borderWidth: 2
|
||||||
// emphasis: {
|
},
|
||||||
// label: {
|
label: {
|
||||||
// show: true,
|
show: false,
|
||||||
// fontSize: '40',
|
position: 'center'
|
||||||
// fontWeight: 'bold'
|
},
|
||||||
// }
|
// emphasis: {
|
||||||
// },
|
// label: {
|
||||||
labelLine: {
|
// show: true,
|
||||||
show: false
|
// fontSize: '40',
|
||||||
},
|
// fontWeight: 'bold'
|
||||||
data:this.data3
|
// }
|
||||||
}
|
// },
|
||||||
]
|
labelLine: {
|
||||||
};
|
show: false
|
||||||
|
},
|
||||||
|
data: this.data3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
option && myChart.setOption(option);
|
option && myChart.setOption(option)
|
||||||
},
|
},
|
||||||
backBtn(){
|
backBtn () {
|
||||||
this.$emit('closeChild2')
|
this.$emit('closeChild2')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.container{
|
.container {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.title-style{
|
.title-style {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color:#000000;
|
color: #000000;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.page-introduction{
|
.page-introduction {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color:#666666;
|
color: #666666;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
.back-btn{
|
.back-btn {
|
||||||
background: #3e8ef7;
|
background: #3e8ef7;
|
||||||
border-color: rgba(101, 165, 249,0);
|
border-color: rgba(101, 165, 249, 0);
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
margin-left:1030px;
|
margin-left: 1030px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
.container-body{
|
.container-body {
|
||||||
width:1300px;
|
width: 1300px;
|
||||||
margin-top:30px;
|
margin-top: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap:wrap
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.container-body1{
|
.container-body1 {
|
||||||
width:420px;
|
width: 420px;
|
||||||
height:250px;
|
height: 250px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin-right:20px;
|
margin-right: 20px;
|
||||||
padding-top:20px;
|
padding-top: 20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
|
}
|
||||||
}
|
.container-body2 {
|
||||||
.container-body2{
|
width: 640px;
|
||||||
width:640px;
|
height: 250px;
|
||||||
height:250px;
|
background-color: #ffffff;
|
||||||
background-color: #ffffff;
|
margin-right: 20px;
|
||||||
margin-right:20px;
|
padding-top: 20px;
|
||||||
padding-top:20px;
|
padding-left: 20px;
|
||||||
padding-left: 20px;
|
}
|
||||||
}
|
.container-body3 {
|
||||||
.container-body3{
|
width: 640px;
|
||||||
width:640px;
|
height: 250px;
|
||||||
height:250px;
|
background-color: #ffffff;
|
||||||
background-color: #ffffff;
|
padding-top: 20px;
|
||||||
padding-top:20px;
|
padding-left: 20px;
|
||||||
padding-left: 20px;
|
}
|
||||||
}
|
.container-body4 {
|
||||||
.container-body4{
|
width: 640px;
|
||||||
width:640px;
|
height: 300px;
|
||||||
height:300px;
|
background-color: #ffffff;
|
||||||
background-color: #ffffff;
|
padding-top: 20px;
|
||||||
padding-top:20px;
|
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-repeat:no-repeat;
|
background-size: 100% 100%;
|
||||||
background-size: 100% 100%;
|
}
|
||||||
}
|
.container-body5 {
|
||||||
.container-body5{
|
width: 640px;
|
||||||
width:640px;
|
height: 300px;
|
||||||
height:300px;
|
background-color: #ffffff;
|
||||||
background-color: #ffffff;
|
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-image:url("../../../assets/img/排行榜背景图.png");
|
background-repeat: no-repeat;
|
||||||
background-repeat:no-repeat;
|
background-size: 100% 100%;
|
||||||
background-size: 100% 100%;
|
}
|
||||||
}
|
.footer {
|
||||||
.footer{
|
display: flex;
|
||||||
display: flex;
|
margin-top: 50px;
|
||||||
margin-top:50px;
|
margin-left: 365px;
|
||||||
margin-left:365px;
|
}
|
||||||
}
|
.footer-left {
|
||||||
.footer-left{
|
width: 250px;
|
||||||
width:250px;
|
height: 1px;
|
||||||
height:1px;
|
background-color: #e0eaf8;
|
||||||
background-color:#e0eaf8;
|
margin-right: 10px;
|
||||||
margin-right:10px;
|
margin-top: 8px;
|
||||||
margin-top:8px
|
}
|
||||||
}
|
.footer-right {
|
||||||
.footer-right{
|
width: 250px;
|
||||||
width:250px;
|
height: 1px;
|
||||||
height:1px;
|
background-color: #e0eaf8;
|
||||||
background-color:#e0eaf8;
|
margin-left: 10px;
|
||||||
margin-left:10px;
|
margin-top: 8px;
|
||||||
margin-top:8px
|
}
|
||||||
}
|
.ranking-img {
|
||||||
.ranking-img{
|
width: 60px;
|
||||||
width:60px;
|
height: 26px;
|
||||||
height:26px;
|
display: flex;
|
||||||
display: flex;
|
line-height: 26px;
|
||||||
line-height: 26px;
|
margin-bottom: 15px;
|
||||||
margin-bottom:15px;
|
margin-right: 10px;
|
||||||
margin-right:10px;
|
padding-left: 15px;
|
||||||
padding-left: 15px;
|
}
|
||||||
}
|
.num-style {
|
||||||
.num-style{
|
position: absolute;
|
||||||
position:absolute;
|
display: flex;
|
||||||
display: flex;
|
margin-left: 90px;
|
||||||
margin-left:90px;
|
width: 200px;
|
||||||
width:200px;
|
margin-top: 5px;
|
||||||
margin-top:5px;
|
color: #333333;
|
||||||
color:#333333;
|
font-size: 16px;
|
||||||
font-size: 16px;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
white-space: nowrap;
|
||||||
white-space: nowrap;
|
text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.count-style{
|
.count-style {
|
||||||
position:absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left:400px;
|
margin-left: 400px;
|
||||||
margin-top:5px;
|
margin-top: 5px;
|
||||||
color:#333333;
|
color: #333333;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
</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'>
|
||||||
<span class='title'>能力统计</span>
|
<span class='title'>能力统计</span>
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
</span>
|
</span>
|
||||||
<span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
<span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
||||||
部门使用情况
|
部门使用情况
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class='line-style'></div>
|
<div class='line-style'></div>
|
||||||
<el-table
|
<el-table
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
<el-table-column v-if="this.choseId===0 && this.departmentId===1 "
|
||||||
prop="resourceShareNum"
|
prop="resourceShareNum"
|
||||||
label="需申请数量"
|
label="需申请数量"
|
||||||
min-width="100%">
|
min-width="100%">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
@ -118,215 +118,208 @@
|
||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
|
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
|
||||||
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
|
<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>
|
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import componentServices from './componentServices.vue'
|
import componentServices from './componentServices.vue'
|
||||||
import applicationResources from './applicationResources.vue'
|
import applicationResources from './applicationResources.vue'
|
||||||
import ComponentUsed from './componentUsed.vue'
|
import ComponentUsed from './componentUsed.vue'
|
||||||
export default {
|
export default {
|
||||||
components:{componentServices,applicationResources, ComponentUsed},
|
components: { componentServices, applicationResources, ComponentUsed },
|
||||||
data(){
|
data () {
|
||||||
return{
|
return {
|
||||||
inputTxt:'',
|
inputTxt: '',
|
||||||
tableId:'',
|
tableId: '',
|
||||||
fatherId:'',
|
fatherId: '',
|
||||||
treeData: [{
|
treeData: [{
|
||||||
label: '一级 1',
|
label: '一级 1',
|
||||||
children: [{
|
children: [{
|
||||||
label: '二级 1-1',
|
label: '二级 1-1',
|
||||||
children: [{
|
children: [{
|
||||||
label: '三级 1-1-1'
|
label: '三级 1-1-1'
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
label: '一级 2',
|
label: '一级 2',
|
||||||
children: [{
|
children: [{
|
||||||
label: '二级 2-1',
|
label: '二级 2-1',
|
||||||
children: [{
|
children: [{
|
||||||
label: '三级 2-1-1'
|
label: '三级 2-1-1'
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
label: '二级 2-2',
|
label: '二级 2-2',
|
||||||
children: [{
|
children: [{
|
||||||
label: '三级 2-2-1'
|
label: '三级 2-2-1'
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
label: '一级 3',
|
label: '一级 3',
|
||||||
children: [{
|
children: [{
|
||||||
label: '二级 3-1',
|
label: '二级 3-1',
|
||||||
children: [{
|
children: [{
|
||||||
label: '三级 3-1-1'
|
label: '三级 3-1-1'
|
||||||
}]
|
}]
|
||||||
}, {
|
}, {
|
||||||
label: '二级 3-2',
|
label: '二级 3-2',
|
||||||
children: [{
|
children: [{
|
||||||
label: '三级 3-2-1'
|
label: '三级 3-2-1'
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
}],
|
}],
|
||||||
total:null,
|
total: null,
|
||||||
defaultProps: {
|
defaultProps: {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name'
|
label: 'name'
|
||||||
},
|
},
|
||||||
choseId:0,
|
choseId: 0,
|
||||||
departmentId:1,
|
departmentId: 1,
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
homeIsShow:true,
|
homeIsShow: true,
|
||||||
servicesIsShow:false,
|
servicesIsShow: false,
|
||||||
resourcesIsShow:false,
|
resourcesIsShow: false,
|
||||||
UsedIsShow:false,
|
UsedIsShow: 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: [{deptName:'部门',resourceNum:222}]
|
tableData: [{ deptName: '部门', resourceNum: 222 }]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created () {
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.getFirstTree()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//搜索框
|
|
||||||
// searchBtn(){
|
|
||||||
// this.getALLTree()
|
|
||||||
// },
|
|
||||||
// //树
|
|
||||||
// handleNodeClick(data) {
|
|
||||||
// console.log(data.name);
|
|
||||||
// this.getTreeName(data)
|
|
||||||
// },
|
|
||||||
//翻页
|
|
||||||
handleCurrentChange(val){
|
|
||||||
if(this.choseId===0){
|
|
||||||
this.getFirstTree(val)
|
|
||||||
}
|
|
||||||
else if(this.choseId===1){
|
|
||||||
this.getReleaseTree(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTreeName (data) {
|
|
||||||
this.$http.get('/census/center/v3/treeList/' ,{
|
|
||||||
params : {
|
|
||||||
keywords:data.name,
|
|
||||||
deptId:'1067246875800000066',
|
|
||||||
// pageNo: pageNo || 1,
|
|
||||||
// pageSize: 20
|
|
||||||
}
|
|
||||||
}).then(res => {
|
|
||||||
this.tableData =res.data.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// // 获取部门列表
|
|
||||||
// getALLTree () {
|
|
||||||
// this.$http.get('/census/center/v3/treeList/' ,{
|
|
||||||
// params : {
|
|
||||||
// keywords:this.inputTxt,
|
|
||||||
// deptId:'1067246875800000066',
|
|
||||||
// // pageNo: pageNo || 1,
|
|
||||||
// // pageSize: 20
|
|
||||||
// }
|
|
||||||
// }).then(res => {
|
|
||||||
// this.treeData =res.data.data
|
|
||||||
// // this.tableData =res.data.data
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
|
|
||||||
// 组件服务部门发布情况
|
},
|
||||||
getFirstTree (page) {
|
mounted () {
|
||||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
this.getFirstTree()
|
||||||
params : {
|
},
|
||||||
page:page||1,
|
methods: {
|
||||||
limit:5,
|
// 搜索框
|
||||||
// id:'1067246875800000066',
|
// searchBtn(){
|
||||||
resourceType:'组件服务'
|
// this.getALLTree()
|
||||||
}
|
// },
|
||||||
}).then(res => {
|
// //树
|
||||||
this.tableData =res.data.data.list
|
// handleNodeClick(data) {
|
||||||
this.total = res.data.data.total
|
// console.log(data.name);
|
||||||
})
|
// this.getTreeName(data)
|
||||||
},
|
// },
|
||||||
// 组件服务部门使用情况列表
|
// 翻页
|
||||||
getSecondTree () {
|
handleCurrentChange (val) {
|
||||||
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
|
if (this.choseId === 0) {
|
||||||
params : {
|
this.getFirstTree(val)
|
||||||
limit:5,
|
} else if (this.choseId === 1) {
|
||||||
page:1,
|
this.getReleaseTree(val)
|
||||||
// id:'1067246875800000064',
|
}
|
||||||
resourceType:'组件服务'
|
},
|
||||||
}
|
getTreeName (data) {
|
||||||
}).then(res => {
|
this.$http.get('/census/center/v3/treeList/', {
|
||||||
this.tableData =res.data.data.list
|
params: {
|
||||||
|
keywords: data.name,
|
||||||
})
|
deptId: '1067246875800000066'
|
||||||
},
|
// pageNo: pageNo || 1,
|
||||||
// 应用资源部门发布情况列表
|
// pageSize: 20
|
||||||
getReleaseTree (page) {
|
}
|
||||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
}).then(res => {
|
||||||
params : {
|
this.tableData = res.data.data
|
||||||
limit:5,
|
})
|
||||||
page:page||1,
|
},
|
||||||
// id:'1067246875800000066',
|
// // 获取部门列表
|
||||||
resourceType:'应用资源'
|
// getALLTree () {
|
||||||
}
|
// this.$http.get('/census/center/v3/treeList/' ,{
|
||||||
}).then(res => {
|
// params : {
|
||||||
this.tableData =res.data.data.list
|
// keywords:this.inputTxt,
|
||||||
this.total = res.data.data.total
|
// deptId:'1067246875800000066',
|
||||||
|
// // pageNo: pageNo || 1,
|
||||||
})
|
// // pageSize: 20
|
||||||
},
|
// }
|
||||||
// 应用资源部门使用情况列表
|
// }).then(res => {
|
||||||
getUsedTree () {
|
// this.treeData =res.data.data
|
||||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
// // this.tableData =res.data.data
|
||||||
params : {
|
// })
|
||||||
limit:5,
|
// },
|
||||||
page:1,
|
|
||||||
// id:'1067246875800000066',
|
// 组件服务部门发布情况
|
||||||
resourceType:'应用资源'
|
getFirstTree (page) {
|
||||||
}
|
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||||
}).then(res => {
|
params: {
|
||||||
this.tableData =res.data.data.list
|
page: page || 1,
|
||||||
|
limit: 5,
|
||||||
})
|
// id:'1067246875800000066',
|
||||||
},
|
resourceType: '组件服务'
|
||||||
handleClick(row) {
|
}
|
||||||
if(this.choseId===0){
|
}).then(res => {
|
||||||
if(this.departmentId===1){
|
this.tableData = res.data.data.list
|
||||||
this.homeIsShow=false
|
this.total = res.data.data.total
|
||||||
this.servicesIsShow=true
|
})
|
||||||
this.tableId=row.deptId
|
},
|
||||||
this.fatherId=1
|
// 组件服务部门使用情况列表
|
||||||
}else if(this.departmentId===2){
|
getSecondTree () {
|
||||||
this.homeIsShow=false
|
this.$http.get('/census/center/v3/resourceUsedDetails/', {
|
||||||
this.UsedIsShow=true
|
params: {
|
||||||
this.tableId=row.deptId
|
limit: 5,
|
||||||
this.fatherId=1
|
page: 1,
|
||||||
}
|
// id:'1067246875800000064',
|
||||||
} else if(this.choseId===1){
|
resourceType: '组件服务'
|
||||||
this.homeIsShow=false
|
}
|
||||||
this.resourcesIsShow=true
|
}).then(res => {
|
||||||
this.tableId=row.deptId
|
this.tableData = res.data.data.list
|
||||||
this.fatherId=2
|
})
|
||||||
}
|
},
|
||||||
|
// 应用资源部门发布情况列表
|
||||||
|
getReleaseTree (page) {
|
||||||
},
|
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||||
//选择组件
|
params: {
|
||||||
choseBtn(index){
|
limit: 5,
|
||||||
this.choseId=index
|
page: page || 1,
|
||||||
this.handleChose(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) {
|
||||||
|
if (this.choseId === 0) {
|
||||||
|
if (this.departmentId === 1) {
|
||||||
|
this.homeIsShow = false
|
||||||
|
this.servicesIsShow = true
|
||||||
|
this.tableId = row.deptId
|
||||||
|
this.fatherId = 1
|
||||||
|
} else if (this.departmentId === 2) {
|
||||||
|
this.homeIsShow = false
|
||||||
|
this.UsedIsShow = 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) {
|
||||||
|
this.choseId = index
|
||||||
|
this.handleChose(1)
|
||||||
|
},
|
||||||
// choseBtn(index){
|
// choseBtn(index){
|
||||||
// this.choseId=index
|
// this.choseId=index
|
||||||
// if (index===0){
|
// if (index===0){
|
||||||
|
@ -338,164 +331,162 @@ export default {
|
||||||
// this.resourcesIsShow=true
|
// this.resourcesIsShow=true
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
//选择发布or使用表格
|
// 选择发布or使用表格
|
||||||
handleChose(index){
|
handleChose (index) {
|
||||||
this.departmentId=index
|
this.departmentId = index
|
||||||
if(index===1){
|
if (index === 1) {
|
||||||
if(this.choseId===0){
|
if (this.choseId === 0) {
|
||||||
this.getFirstTree()
|
this.getFirstTree()
|
||||||
}else if(this.choseId===1){
|
} else if (this.choseId === 1) {
|
||||||
this.getReleaseTree()
|
this.getReleaseTree()
|
||||||
}
|
}
|
||||||
}else if(index===2){
|
} else if (index === 2) {
|
||||||
if(this.choseId===0){
|
if (this.choseId === 0) {
|
||||||
this.getSecondTree()
|
this.getSecondTree()
|
||||||
}else{
|
} else {
|
||||||
this.getUsedTree()
|
this.getUsedTree()
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
//翻页
|
|
||||||
handleSizeChange(val) {
|
|
||||||
console.log(`每页 ${val} 条`);
|
|
||||||
},
|
|
||||||
closeChild(){
|
|
||||||
this.homeIsShow=true
|
|
||||||
this.servicesIsShow=false
|
|
||||||
this. handleCurrentChange(1)
|
|
||||||
|
|
||||||
},
|
|
||||||
closeChild2(){
|
|
||||||
this.homeIsShow=true
|
|
||||||
this.UsedIsShow=false
|
|
||||||
this. handleCurrentChange(1)
|
|
||||||
},
|
|
||||||
closeApplication(){
|
|
||||||
this.homeIsShow=true
|
|
||||||
this.resourcesIsShow=false
|
|
||||||
this. handleCurrentChange(1)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 翻页
|
||||||
|
handleSizeChange (val) {
|
||||||
|
console.log(`每页 ${val} 条`)
|
||||||
|
},
|
||||||
|
closeChild () {
|
||||||
|
this.homeIsShow = true
|
||||||
|
this.servicesIsShow = false
|
||||||
|
this.handleCurrentChange(1)
|
||||||
|
},
|
||||||
|
closeChild2 () {
|
||||||
|
this.homeIsShow = true
|
||||||
|
this.UsedIsShow = false
|
||||||
|
this.handleCurrentChange(1)
|
||||||
|
},
|
||||||
|
closeApplication () {
|
||||||
|
this.homeIsShow = true
|
||||||
|
this.resourcesIsShow = false
|
||||||
|
this.handleCurrentChange(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<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;
|
display: inline-block;
|
||||||
// background-color: #ffffff;
|
// background-color: #ffffff;
|
||||||
margin-right:10px
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.left-search{
|
.left-search {
|
||||||
width:250px;
|
width: 250px;
|
||||||
height:76px;
|
height: 76px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
.input-style{
|
.input-style {
|
||||||
width:210px;
|
width: 210px;
|
||||||
height:36px;
|
height: 36px;
|
||||||
margin:20px 20px;
|
margin: 20px 20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
border:1px solid transparent;
|
border: 1px solid transparent;
|
||||||
background-color: #f2f4fa;
|
background-color: #f2f4fa;
|
||||||
}
|
}
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #b0b3ca;
|
color: #b0b3ca;
|
||||||
}
|
}
|
||||||
.input-search{
|
.input-search {
|
||||||
width:44px;
|
width: 44px;
|
||||||
height:30px;
|
height: 30px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
top:38px;
|
top: 38px;
|
||||||
left:196px;
|
left: 196px;
|
||||||
}
|
}
|
||||||
::v-deep.tree-style {
|
::v-deep.tree-style {
|
||||||
.el-tree-node__label{
|
.el-tree-node__label {
|
||||||
font-size:16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.el-tree-node__content{
|
.el-tree-node__content {
|
||||||
width:240px;
|
width: 240px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
word-break: break-all;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-box{
|
.top-box {
|
||||||
height:80px;
|
height: 80px;
|
||||||
width:100%;
|
width: 100%;
|
||||||
background-color: #fafafc;
|
background-color: #fafafc;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.title-list-style {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.title-single {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 90px;
|
||||||
|
color: #666666;
|
||||||
|
height: 24px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.box-style {
|
||||||
|
width: 90px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
.second-title {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #979eb9;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.line-style {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.aui-card--fill {
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
}
|
||||||
|
.choseStyle {
|
||||||
|
color: #526aff;
|
||||||
|
border: 1px solid #526aff;
|
||||||
|
}
|
||||||
|
.departmentStyle {
|
||||||
|
color: #526aff;
|
||||||
|
}
|
||||||
|
::v-deep .tree-text-styleJ {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.title{
|
|
||||||
display: flex;
|
|
||||||
font-size:20px;
|
|
||||||
color:#000000;
|
|
||||||
font-weight: bold;
|
|
||||||
padding-left:15px;
|
|
||||||
padding-top:10px;
|
|
||||||
}
|
|
||||||
.title-list-style{
|
|
||||||
display: flex;
|
|
||||||
margin-top:10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.title-single{
|
|
||||||
font-size:14px;
|
|
||||||
width:90px;
|
|
||||||
color:#666666;
|
|
||||||
height:24px;
|
|
||||||
margin-left:10px;
|
|
||||||
border:1px solid #cccccc;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor:pointer
|
|
||||||
|
|
||||||
}
|
|
||||||
.box-style{
|
|
||||||
width:90px;
|
|
||||||
height:24px;
|
|
||||||
display:flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
}
|
|
||||||
.second-title{
|
|
||||||
margin-top:20px;
|
|
||||||
font-size: 14px;
|
|
||||||
color:#979eb9;
|
|
||||||
cursor:pointer
|
|
||||||
}
|
|
||||||
.line-style{
|
|
||||||
width:100%;
|
|
||||||
height:1px;
|
|
||||||
background-color:#f5f6fa;
|
|
||||||
margin-top:15px;
|
|
||||||
margin-bottom:15px;
|
|
||||||
}
|
|
||||||
.aui-card--fill{
|
|
||||||
width:100% !important;
|
|
||||||
padding: 0px !important;
|
|
||||||
}
|
|
||||||
.choseStyle{
|
|
||||||
color:#526aff;
|
|
||||||
border:1px solid #526aff
|
|
||||||
}
|
|
||||||
.departmentStyle{
|
|
||||||
color:#526aff
|
|
||||||
}
|
|
||||||
::v-deep .tree-text-styleJ{
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -698,6 +698,7 @@ export default {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.boxcontent {
|
.boxcontent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -707,6 +708,7 @@ export default {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.preview-dialog {
|
.preview-dialog {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -570,7 +570,7 @@ export default {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
margin-left: 14px;
|
margin-left: 14px;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/edit-card.png');
|
background-image: url("~@/assets/img/capabilityCatalogingManagement/edit-card.png");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div:nth-child(2) {
|
div:nth-child(2) {
|
||||||
|
@ -609,7 +609,7 @@ export default {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -45.5px;
|
margin-left: -45.5px;
|
||||||
margin-top: -45.5px;
|
margin-top: -45.5px;
|
||||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
|
background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png");
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
> span {
|
> span {
|
||||||
|
@ -618,7 +618,7 @@ export default {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
}
|
}
|
||||||
.add-enterprise-input-wrap {
|
.add-enterprise-input-wrap {
|
||||||
// height: 50px;
|
// height: 50px;
|
||||||
|
@ -656,7 +656,7 @@ export default {
|
||||||
background: #0fa7f6;
|
background: #0fa7f6;
|
||||||
span {
|
span {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -704,7 +704,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
}
|
}
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -713,7 +713,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
@ -724,7 +724,7 @@ export default {
|
||||||
.enterprise-card-tip-first:before,
|
.enterprise-card-tip-first:before,
|
||||||
.enterprise-card-tip-first:after {
|
.enterprise-card-tip-first:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: ' ';
|
content: " ";
|
||||||
top: 32px;
|
top: 32px;
|
||||||
left: -16px;
|
left: -16px;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -752,7 +752,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
}
|
}
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -761,7 +761,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
@ -772,7 +772,7 @@ export default {
|
||||||
.enterprise-card-tip-third:before,
|
.enterprise-card-tip-third:before,
|
||||||
.enterprise-card-tip-third:after {
|
.enterprise-card-tip-third:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: ' ';
|
content: " ";
|
||||||
top: 32px;
|
top: 32px;
|
||||||
left: 180px;
|
left: 180px;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -801,7 +801,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
}
|
}
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -810,7 +810,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
@ -821,7 +821,7 @@ export default {
|
||||||
.enterprise-card-tip-second:before,
|
.enterprise-card-tip-second:before,
|
||||||
.enterprise-card-tip-second:after {
|
.enterprise-card-tip-second:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: ' ';
|
content: " ";
|
||||||
top: -15px;
|
top: -15px;
|
||||||
left: 78px;
|
left: 78px;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -836,7 +836,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 373px;
|
// height: 373px;
|
||||||
height: 176px;
|
height: 176px;
|
||||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/small-card-orange.png');
|
background-image: url("~@/assets/img/capabilityCatalogingManagement/small-card-orange.png");
|
||||||
.resource-detail-title {
|
.resource-detail-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
@ -845,15 +845,17 @@ export default {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
span {
|
span {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -867,7 +869,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding-left: 19px;
|
padding-left: 19px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: white;
|
color: white;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
@ -899,7 +901,7 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
|
background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png");
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -908,7 +910,7 @@ export default {
|
||||||
}
|
}
|
||||||
input::-webkit-input-placeholder {
|
input::-webkit-input-placeholder {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: 'Microsoft YaHei';
|
font-family: "Microsoft YaHei";
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -76,7 +76,7 @@ import * as echarts from 'echarts'
|
||||||
export default {
|
export default {
|
||||||
// components: {},
|
// components: {},
|
||||||
// props: {},
|
// props: {},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
// 排行榜
|
// 排行榜
|
||||||
RankingData: [
|
RankingData: [
|
||||||
|
@ -169,20 +169,20 @@ export default {
|
||||||
total: 0
|
total: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted () {
|
||||||
this.myEchars()
|
this.myEchars()
|
||||||
// 分页
|
// 分页
|
||||||
this.total = this.AnomalyStatisticsTable.length
|
this.total = this.AnomalyStatisticsTable.length
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 分页
|
// 分页
|
||||||
handleSizeChange(val) {
|
handleSizeChange (val) {
|
||||||
console.log(`每页 ${val} 条`)
|
console.log(`每页 ${val} 条`)
|
||||||
},
|
},
|
||||||
handleCurrentChange(val) {
|
handleCurrentChange (val) {
|
||||||
console.log(`当前页: ${val}`)
|
console.log(`当前页: ${val}`)
|
||||||
},
|
},
|
||||||
myEchars() {
|
myEchars () {
|
||||||
var chartDom = document.getElementById('main')
|
var chartDom = document.getElementById('main')
|
||||||
var myChart = echarts.init(chartDom)
|
var myChart = echarts.init(chartDom)
|
||||||
var option
|
var option
|
||||||
|
@ -276,7 +276,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ApiBox {
|
.ApiBox {
|
||||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
|
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
|
||||||
|
no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
width: 22.5rem;
|
width: 22.5rem;
|
||||||
height: 6.875rem;
|
height: 6.875rem;
|
||||||
|
@ -313,7 +314,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ApiBox:last-of-type {
|
.ApiBox:last-of-type {
|
||||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
|
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png")
|
||||||
|
no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
|
@ -383,9 +385,11 @@ export default {
|
||||||
display: block;
|
display: block;
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
width: 2.25rem;
|
width: 2.25rem;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(204, 204, 204, 0.6),
|
to right,
|
||||||
rgba(0, 0, 0, 0));
|
rgba(204, 204, 204, 0.6),
|
||||||
|
rgba(0, 0, 0, 0)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -401,6 +405,7 @@ export default {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
@ -412,9 +417,11 @@ export default {
|
||||||
|
|
||||||
.RankingListData:nth-of-type(1) i b {
|
.RankingListData:nth-of-type(1) i b {
|
||||||
width: 3.75rem;
|
width: 3.75rem;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(251, 59, 5, 0.6),
|
to right,
|
||||||
rgba(0, 0, 0, 0));
|
rgba(251, 59, 5, 0.6),
|
||||||
|
rgba(0, 0, 0, 0)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.RankingListData:nth-of-type(1) span {
|
.RankingListData:nth-of-type(1) span {
|
||||||
|
@ -423,9 +430,11 @@ export default {
|
||||||
|
|
||||||
.RankingListData:nth-of-type(2) i b {
|
.RankingListData:nth-of-type(2) i b {
|
||||||
width: 3.125rem;
|
width: 3.125rem;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(251, 123, 5, 0.6),
|
to right,
|
||||||
rgba(0, 0, 0, 0));
|
rgba(251, 123, 5, 0.6),
|
||||||
|
rgba(0, 0, 0, 0)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.RankingListData:nth-of-type(2) span {
|
.RankingListData:nth-of-type(2) span {
|
||||||
|
@ -434,9 +443,11 @@ export default {
|
||||||
|
|
||||||
.RankingListData:nth-of-type(3) i b {
|
.RankingListData:nth-of-type(3) i b {
|
||||||
width: 2.75rem;
|
width: 2.75rem;
|
||||||
background: linear-gradient(to right,
|
background: linear-gradient(
|
||||||
rgba(250, 179, 2, 0.6),
|
to right,
|
||||||
rgba(0, 0, 0, 0));
|
rgba(250, 179, 2, 0.6),
|
||||||
|
rgba(0, 0, 0, 0)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.RankingListData:nth-of-type(3) span {
|
.RankingListData:nth-of-type(3) span {
|
||||||
|
@ -447,7 +458,8 @@ export default {
|
||||||
.AbnormalDistribution {
|
.AbnormalDistribution {
|
||||||
margin-right: 3.75rem;
|
margin-right: 3.75rem;
|
||||||
|
|
||||||
.container-body1 {}
|
.container-body1 {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.AnomalyStatistics {
|
.AnomalyStatistics {
|
||||||
|
@ -472,12 +484,12 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-table tbody tr:hover>td {
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tablePagination {
|
.tablePagination {
|
||||||
|
|
|
@ -1298,6 +1298,7 @@ export default {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
div:last-child {
|
div:last-child {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
|
|
@ -35,7 +35,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
contentTitle
|
contentTitle
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
|
title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
|
||||||
list: [],
|
list: [],
|
||||||
|
@ -77,13 +77,13 @@ export default {
|
||||||
loadingTable: false
|
loadingTable: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted () {
|
||||||
this.getResourceByDept()
|
this.getResourceByDept()
|
||||||
this.getApplyByDept()
|
this.getApplyByDept()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 发布动态
|
// 发布动态
|
||||||
getResourceByDept() {
|
getResourceByDept () {
|
||||||
const data = {
|
const data = {
|
||||||
limit: 5,
|
limit: 5,
|
||||||
page: 1
|
page: 1
|
||||||
|
@ -109,7 +109,7 @@ export default {
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
// 部门推荐能力
|
// 部门推荐能力
|
||||||
getApplyByDept() {
|
getApplyByDept () {
|
||||||
const data = {
|
const data = {
|
||||||
limit: 5,
|
limit: 5,
|
||||||
page: 1
|
page: 1
|
||||||
|
@ -132,11 +132,11 @@ export default {
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
jumpTo() {
|
jumpTo () {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: 'activiti-my-work-dynamics'
|
path: 'activiti-my-work-dynamics'
|
||||||
});
|
})
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -146,6 +146,7 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-view {
|
.bottom-view {
|
||||||
|
|
|
@ -43,131 +43,132 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
dataInfo: {
|
|
||||||
type: Object,
|
|
||||||
default: () => { }
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
formatNum(num) {
|
|
||||||
return num || num === 0 ? num : '--'
|
|
||||||
},
|
|
||||||
goPage(url) {
|
|
||||||
this.$router.push({
|
|
||||||
path: url
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataInfo: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatNum (num) {
|
||||||
|
return num || num === 0 ? num : '--'
|
||||||
|
},
|
||||||
|
goPage (url) {
|
||||||
|
this.$router.push({
|
||||||
|
path: url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.ellipsis {
|
.ellipsis {
|
||||||
//超出一行省略号
|
//超出一行省略号
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-margin-left {
|
.no-margin-left {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row-bottom {
|
.flex-row-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row-center {
|
.flex-row-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dept-box {
|
.dept-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 394px;
|
width: 394px;
|
||||||
height: 252px;
|
height: 252px;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
background: rgba($color: #f1f3f6, $alpha: 0.8);
|
background: rgba($color: #f1f3f6, $alpha: 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-box {
|
.left-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
// width: 80px;
|
// width: 80px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
// margin-top: 57px;
|
// margin-top: 57px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-box {
|
.list-box {
|
||||||
width: 314px;
|
width: 314px;
|
||||||
height: 252px;
|
height: 252px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-bottom: 1px dashed #c6c6c6;
|
border-bottom: 1px dashed #c6c6c6;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
}
|
}
|
||||||
|
|
||||||
.more {
|
.more {
|
||||||
color: #212121;
|
color: #212121;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-data {
|
.no-data {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #212121;
|
color: #212121;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -113,6 +113,7 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row-between {
|
.flex-row-between {
|
||||||
|
|
Loading…
Reference in New Issue