能力统计
This commit is contained in:
parent
cd42aa29af
commit
538b6f14a4
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,110 @@
|
||||||
|
<template>
|
||||||
|
<div class='container'>
|
||||||
|
<span class='title-style'>应用资源</span>
|
||||||
|
<span class='page-introduction'>发布情况统计</span>
|
||||||
|
<div class='container-body'>
|
||||||
|
<div class='container-body1'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||||
|
</div>
|
||||||
|
<div class='container-body2'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>发布量情况分布</span>
|
||||||
|
</div>
|
||||||
|
<div class='container-body3'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
|
||||||
|
</div>
|
||||||
|
<div class='container-body4'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
<div class='container-body5'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
<div class='container-body6'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||||
|
</div>
|
||||||
|
<div class='container-body7'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.container{
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.title-style{
|
||||||
|
font-size: 24px;
|
||||||
|
color:#000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.page-introduction{
|
||||||
|
font-size: 18px;
|
||||||
|
color:#666666;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body{
|
||||||
|
width:1300px;
|
||||||
|
margin-top:30px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap
|
||||||
|
}
|
||||||
|
.container-body1{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container-body2{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body3{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body4{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.container-body5{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.container-body6{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.container-body7{
|
||||||
|
width:860px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,358 @@
|
||||||
|
<template>
|
||||||
|
<div class='container'>
|
||||||
|
<span class='title-style'>组件服务</span>
|
||||||
|
<span class='page-introduction'>发布情况统计</span>
|
||||||
|
<div class='container-body'>
|
||||||
|
<div class='container-body1'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
|
||||||
|
<div id="main1" style="width: 400px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body2'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>发布量情况分布</span>
|
||||||
|
<div id="main2" style="width: 400px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body3'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
|
||||||
|
<div id="main3" style="width: 400px;height:200px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class='container-body4'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
<div class='container-body5'>
|
||||||
|
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span>
|
||||||
|
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='footer'>
|
||||||
|
<div class='footer-left' ></div>
|
||||||
|
<span style='color:#b7c2d1;font-size:16px'>到底啦</span>
|
||||||
|
<div class='footer-right'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted(){
|
||||||
|
this.myEcharts1()
|
||||||
|
this.myEcharts2()
|
||||||
|
this.myEcharts3()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
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(((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);
|
||||||
|
},
|
||||||
|
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'
|
||||||
|
},
|
||||||
|
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');
|
||||||
|
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'
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container{
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.title-style{
|
||||||
|
font-size: 24px;
|
||||||
|
color:#000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.page-introduction{
|
||||||
|
font-size: 18px;
|
||||||
|
color:#666666;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body{
|
||||||
|
width:1300px;
|
||||||
|
margin-top:30px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap
|
||||||
|
}
|
||||||
|
.container-body1{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container-body2{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right:20px;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body3{
|
||||||
|
width:420px;
|
||||||
|
height:250px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
.container-body4{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.container-body5{
|
||||||
|
width:640px;
|
||||||
|
height:300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-top:20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
display: flex;
|
||||||
|
margin-top:50px;
|
||||||
|
margin-left:365px;
|
||||||
|
}
|
||||||
|
.footer-left{
|
||||||
|
width:250px;
|
||||||
|
height:1px;
|
||||||
|
background-color:#e0eaf8;
|
||||||
|
margin-right:10px;
|
||||||
|
margin-top:8px
|
||||||
|
}
|
||||||
|
.footer-right{
|
||||||
|
width:250px;
|
||||||
|
height:1px;
|
||||||
|
background-color:#e0eaf8;
|
||||||
|
margin-left:10px;
|
||||||
|
margin-top:8px
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'>
|
||||||
|
<div class="mod-demand__bsdemand">
|
||||||
|
<div class='top-box'>
|
||||||
|
<span class='title'>能力统计</span>
|
||||||
|
<div class='title-list-style'>
|
||||||
|
<div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
|
||||||
|
<span class='box-style'>{{item.name}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='second-title'>
|
||||||
|
<span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
|
||||||
|
部门发布情况
|
||||||
|
</span>
|
||||||
|
<span :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
|
||||||
|
部门使用情况
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class='line-style'></div>
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
label="部门名称"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="releaseNum"
|
||||||
|
label="发布总数"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="applyNum"
|
||||||
|
label="被申请总数"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="browseNmu"
|
||||||
|
label="浏览总量"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="collectNum"
|
||||||
|
label="收藏量"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="transferNum"
|
||||||
|
label="被调用总数"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="applicationNum"
|
||||||
|
label="被应用总数"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="needApplicationNum"
|
||||||
|
label="需申请数量"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="reductionNum"
|
||||||
|
label="免批数量"
|
||||||
|
min-width="100%">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
min-width="92%">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="block">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage4"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
layout="total, prev, pager, next, jumper"
|
||||||
|
:total="40">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<component-services v-if='servicesIsShow' ></component-services>
|
||||||
|
<application-resources v-if='resourcesIsShow'></application-resources>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import componentServices from './componentServices.vue'
|
||||||
|
import applicationResources from './applicationResources.vue'
|
||||||
|
export default {
|
||||||
|
components:{componentServices,applicationResources},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
choseId:null,
|
||||||
|
departmentId:1,
|
||||||
|
currentPage4: 4,
|
||||||
|
homeIsShow:true,
|
||||||
|
servicesIsShow:false,
|
||||||
|
resourcesIsShow:false,
|
||||||
|
titleList:[
|
||||||
|
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
|
||||||
|
],
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(row) {
|
||||||
|
console.log(row);
|
||||||
|
},
|
||||||
|
//选择组件
|
||||||
|
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使用表格
|
||||||
|
handleChose(index){
|
||||||
|
this.departmentId=index
|
||||||
|
},
|
||||||
|
//翻页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
console.log(`每页 ${val} 条`);
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.top-box{
|
||||||
|
height:80px;
|
||||||
|
background-color: #fafafc;
|
||||||
|
}
|
||||||
|
.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
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue