后台加overflow: hidden;

This commit is contained in:
gaoyuanwei 2022-07-19 09:55:05 +08:00
parent 52ece255f3
commit cc633449ed
9 changed files with 961 additions and 956 deletions

View File

@ -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: {
// richoneonetwotwothreethree"" // richoneonetwotwothreethree""
a: { a: {
// //
width: 100, width: 100,
color: "#000000", color: '#000000',
fontSize: 12, fontSize: 12,
fontWeight: "bolder", fontWeight: 'bolder'
}, },
b: { b: {
// 102030 // 102030
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>

View File

@ -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>

View File

@ -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%;

View File

@ -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>

View File

@ -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 {

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -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 {