后台加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

@ -58,22 +58,22 @@
</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:{ fatherId: {
type:Number, type: Number,
default:null, default: null
} }
}, },
data(){ data () {
return{ return {
data1:[], data1: [],
data2: [ data2: [
// { value: 1048,name: '' }, // { value: 1048,name: '' },
// { value: 735, name: '' }, // { value: 735, name: '' },
@ -83,47 +83,44 @@ export default {
data3: [ data3: [
// { value: 1048,name: '' }, // { value: 1048,name: '' },
], ],
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',], colorList: ['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)', 'linear-gradient(to right,rgba(250, 179, 2,.6),transparent)', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent', 'linear-gradient(to right,rgba(82, 106, 255,.6),transparent)'],
widthList:['90px','80px','70px','60px','50px'], widthList: ['90px', '80px', '70px', '60px', '50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList: ['#fc5656', '#ff8a00', '#f9af0a', '#808fff', '#808fff'],
usedList:[{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},], 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},] applicationList: [{ name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称一', score: 111 }, { name: '组件名称四', score: 111 }, { name: '组件名称五', score: 111 }]
} }
}, },
created(){ created () {
if(this.fatherId===1){ if (this.fatherId === 1) {
this.getBeCalled() this.getBeCalled()
this.getBeApplied() this.getBeApplied()
this.getAlgorithm() this.getAlgorithm()
this.getDistributed() this.getDistributed()
this.getScoreList() this.getScoreList()
}else{ } else {
} }
},
mounted () {
}, },
mounted(){ methods: {
},
methods:{
// //
getScoreList () { getScoreList () {
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{ this.$http.get('/census/center/v3/assemblerScoreInfo', {
params : { params: {
id:this.tableId, id: this.tableId,
resourceType:"应用资源" resourceType: '应用资源'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
let arry=[] let arry = []
arry=res.data.data arry = res.data.data
arry.forEach((item)=>{ arry.forEach((item) => {
const single = {
const single={ value: item.scoreNum,
value:item.scoreNum, name: item.score
name:item.score
} }
// const newList=[] // const newList=[]
this.data1.push(single) this.data1.push(single)
@ -131,25 +128,23 @@ export default {
this.myEcharts1() this.myEcharts1()
}) })
}) })
}, },
// //
getAlgorithm () { getAlgorithm () {
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{ this.$http.get('/census/center/v3/assemblerUsedInfo', {
params : { params: {
id:this.tableId, id: this.tableId,
resourceType:"组件服务" resourceType: '组件服务'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
let arry=[] let arry = []
arry=res.data.data arry = res.data.data
arry.forEach((item)=>{ arry.forEach((item) => {
const single = {
const single={ value: item.nums,
value:item.nums, name: item.attr_value
name:item.attr_value
} }
// const newList=[] // const newList=[]
this.data2.push(single) this.data2.push(single)
@ -157,59 +152,57 @@ export default {
this.myEcharts2() this.myEcharts2()
}) })
}) })
}, },
// //
getDistributed () { getDistributed () {
this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{ this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList', {
params : { params: {
id:this.tableId, id: this.tableId,
resourceType:"组件服务" resourceType: '组件服务'
} }
}).then(res => { }).then(res => {
let arry=[] let arry = []
arry=res.data.data arry = res.data.data
arry.forEach((item)=>{ arry.forEach((item) => {
const single={ const single = {
value:item.total, value: item.total,
name:item.type name: item.type
} }
this.data3.push(single) this.data3.push(single)
this.myEcharts3() this.myEcharts3()
}) })
}) })
}, },
// top5使 // top5使
getBeCalled () { getBeCalled () {
this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{ this.$http.get('/census/center/v3/assemblerUseTopInfo', {
params : { params: {
id:this.tableId, id: this.tableId,
resourceType:"组件服务" resourceType: '组件服务'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
this.usedList =res.data.data this.usedList = res.data.data
}) })
}, },
// 使5 // 使5
getBeApplied () { getBeApplied () {
this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{ this.$http.get('/census/center/v3/assemblerUseScoreTopInfo', {
params : { params: {
id:this.tableId, id: this.tableId,
resourceType:"应用资源" resourceType: '应用资源'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
this.applicationList =res.data.data this.applicationList = res.data.data
}) })
}, },
myEcharts1(){ myEcharts1 () {
var chartDom = document.getElementById('main1'); var chartDom = document.getElementById('main1')
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom)
var option; var option
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
@ -218,38 +211,38 @@ export default {
orient: '', orient: '',
top: '14%', top: '14%',
left: '55%', left: '55%',
width:"auto", width: 'auto',
height:"auto", height: 'auto',
orient: "vertical", orient: 'vertical',
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使 // 使
formatter: function(name) { formatter: function (name) {
var data = option.series[0].data; var data = option.series[0].data
var total = 0; var total = 0
var tarValue; var tarValue
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += Number(data[i].value); total += Number(data[i].value)
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value
} }
} }
var v = tarValue; var v = tarValue
var p = Math.round(((v / total) * 100)); var p = Math.round(((v / total) * 100))
return `${name} ${p}%`; return `${name} ${p}%`
}, },
itemStyle:{}, itemStyle: {},
textStyle: { textStyle: {
color: "#666666", color: '#666666',
padding:[0,8,0,18] padding: [0, 8, 0, 18]
}, }
}, },
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['40%', '60%'], radius: ['40%', '60%'],
center:['22%', '50%'], center: ['22%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
@ -266,14 +259,14 @@ export default {
data: this.data1 data: this.data1
} }
] ]
}; }
option && myChart.setOption(option); option && myChart.setOption(option)
}, },
myEcharts2(){ myEcharts2 () {
var chartDom = document.getElementById('main2'); var chartDom = document.getElementById('main2')
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom)
var option; var option
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
@ -282,31 +275,31 @@ export default {
orient: '', orient: '',
top: '22%', top: '22%',
left: '50%', left: '50%',
width:"auto", width: 'auto',
height:"auto", height: 'auto',
orient: "vertical", orient: 'vertical',
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使 // 使
formatter: function(name) { formatter: function (name) {
var data = option.series[0].data; var data = option.series[0].data
var total = 0; var total = 0
var tarValue; var tarValue
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += Number(data[i].value); total += Number(data[i].value)
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value
} }
} }
var v = tarValue; var v = tarValue
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100))
return `${name} ${p}%`; return `${name} ${p}%`
}, },
itemStyle:{}, itemStyle: {},
textStyle: { textStyle: {
color: "#666666", color: '#666666',
padding:[0,8,0,18] padding: [0, 8, 0, 18]
}, }
}, },
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [ series: [
@ -314,7 +307,7 @@ export default {
// name: 'Access From', // name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '60%'], radius: ['40%', '60%'],
center:['22%', '50%'], center: ['22%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
@ -331,66 +324,67 @@ export default {
data: this.data2 data: this.data2
} }
] ]
}; }
option && myChart.setOption(option); option && myChart.setOption(option)
}, },
myEcharts3(){ myEcharts3 () {
var chartDom = document.getElementById('main3'); var chartDom = document.getElementById('main3')
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom)
var option; var option
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: "vertical", type: 'scroll', orient: 'vertical',
type: 'scroll',
top: '22%', top: '22%',
left: '50%', left: '50%',
width:"auto", width: 'auto',
height:"auto", height: 'auto',
orient: "vertical", orient: 'vertical',
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使 // 使
formatter: function(name) { formatter: function (name) {
var data = option.series[0].data; var data = option.series[0].data
var total = 0; var total = 0
var tarValue; var tarValue
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += Number(data[i].value); total += Number(data[i].value)
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value
} }
} }
// var v = tarValue; // var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100))
console.log('@@@@', tarValue, total) console.log('@@@@', tarValue, total)
return `{a|${name}} {b|${p}%}`; return `{a|${name}} {b|${p}%}`
}, },
itemStyle:{}, itemStyle: {},
textStyle: { textStyle: {
rich: { 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: '#666666',
backgroundColor: 'transparent',
padding: [0, 8, 0, 18]
}
}, },
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [ series: [
@ -398,7 +392,7 @@ export default {
// name: 'Access From', // name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '60%'], radius: ['40%', '60%'],
center:['22%', '50%'], center: ['22%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
@ -419,142 +413,142 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data:this.data3 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{ }
position:absolute; .count-style {
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

@ -131,12 +131,12 @@ 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: [{
@ -172,33 +172,32 @@ export default {
}] }]
}] }]
}], }],
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(){ mounted () {
this.getFirstTree() this.getFirstTree()
}, },
methods: { methods: {
// //
// searchBtn(){ // searchBtn(){
// this.getALLTree() // this.getALLTree()
// }, // },
@ -207,25 +206,24 @@ export default {
// console.log(data.name); // console.log(data.name);
// this.getTreeName(data) // this.getTreeName(data)
// }, // },
// //
handleCurrentChange(val){ handleCurrentChange (val) {
if(this.choseId===0){ if (this.choseId === 0) {
this.getFirstTree(val) this.getFirstTree(val)
} } else if (this.choseId === 1) {
else if(this.choseId===1){
this.getReleaseTree(val) this.getReleaseTree(val)
} }
}, },
getTreeName (data) { getTreeName (data) {
this.$http.get('/census/center/v3/treeList/' ,{ this.$http.get('/census/center/v3/treeList/', {
params : { params: {
keywords:data.name, keywords: data.name,
deptId:'1067246875800000066', deptId: '1067246875800000066'
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data this.tableData = res.data.data
}) })
}, },
// // // //
@ -245,86 +243,81 @@ export default {
// //
getFirstTree (page) { getFirstTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{ this.$http.get('/census/center/v3/resourceReleaseDetails/', {
params : { params: {
page:page||1, page: page || 1,
limit:5, limit: 5,
// id:'1067246875800000066', // id:'1067246875800000066',
resourceType:'组件服务' resourceType: '组件服务'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data.list this.tableData = res.data.data.list
this.total = res.data.data.total this.total = res.data.data.total
}) })
}, },
// 使 // 使
getSecondTree () { getSecondTree () {
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{ this.$http.get('/census/center/v3/resourceUsedDetails/', {
params : { params: {
limit:5, limit: 5,
page:1, page: 1,
// id:'1067246875800000064', // id:'1067246875800000064',
resourceType:'组件服务' resourceType: '组件服务'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data.list this.tableData = res.data.data.list
}) })
}, },
// //
getReleaseTree (page) { getReleaseTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{ this.$http.get('/census/center/v3/resourceReleaseDetails/', {
params : { params: {
limit:5, limit: 5,
page:page||1, page: page || 1,
// id:'1067246875800000066', // id:'1067246875800000066',
resourceType:'应用资源' resourceType: '应用资源'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data.list this.tableData = res.data.data.list
this.total = res.data.data.total this.total = res.data.data.total
}) })
}, },
// 使 // 使
getUsedTree () { getUsedTree () {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{ this.$http.get('/census/center/v3/resourceReleaseDetails/', {
params : { params: {
limit:5, limit: 5,
page:1, page: 1,
// id:'1067246875800000066', // id:'1067246875800000066',
resourceType:'应用资源' resourceType: '应用资源'
} }
}).then(res => { }).then(res => {
this.tableData =res.data.data.list this.tableData = res.data.data.list
}) })
}, },
handleClick(row) { handleClick (row) {
if(this.choseId===0){ if (this.choseId === 0) {
if(this.departmentId===1){ if (this.departmentId === 1) {
this.homeIsShow=false this.homeIsShow = false
this.servicesIsShow=true this.servicesIsShow = true
this.tableId=row.deptId this.tableId = row.deptId
this.fatherId=1 this.fatherId = 1
}else if(this.departmentId===2){ } else if (this.departmentId === 2) {
this.homeIsShow=false this.homeIsShow = false
this.UsedIsShow=true this.UsedIsShow = true
this.tableId=row.deptId this.tableId = row.deptId
this.fatherId=1 this.fatherId = 1
} }
} else if(this.choseId===1){ } else if (this.choseId === 1) {
this.homeIsShow=false this.homeIsShow = false
this.resourcesIsShow=true this.resourcesIsShow = true
this.tableId=row.deptId this.tableId = row.deptId
this.fatherId=2 this.fatherId = 2
} }
}, },
// //
choseBtn(index){ choseBtn (index) {
this.choseId=index this.choseId = index
this.handleChose(1) this.handleChose(1)
}, },
// choseBtn(index){ // choseBtn(index){
@ -338,71 +331,69 @@ 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) { handleSizeChange (val) {
console.log(`每页 ${val}`); console.log(`每页 ${val}`)
}, },
closeChild(){ closeChild () {
this.homeIsShow=true this.homeIsShow = true
this.servicesIsShow=false this.servicesIsShow = false
this. handleCurrentChange(1) this.handleCurrentChange(1)
}, },
closeChild2(){ closeChild2 () {
this.homeIsShow=true this.homeIsShow = true
this.UsedIsShow=false this.UsedIsShow = false
this. handleCurrentChange(1) this.handleCurrentChange(1)
}, },
closeApplication(){ closeApplication () {
this.homeIsShow=true this.homeIsShow = true
this.resourcesIsShow=false this.resourcesIsShow = false
this. handleCurrentChange(1) 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 {
@ -410,92 +401,92 @@ input::placeholder {
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{ .title {
display: flex; display: flex;
font-size:20px; font-size: 20px;
color:#000000; color: #000000;
font-weight: bold; font-weight: bold;
padding-left:15px; padding-left: 15px;
padding-top:10px; padding-top: 10px;
} }
.title-list-style{ .title-list-style {
display: flex; display: flex;
margin-top:10px; margin-top: 10px;
}
} .title-single {
.title-single{ font-size: 14px;
font-size:14px; width: 90px;
width:90px; color: #666666;
color:#666666; height: 24px;
height:24px; margin-left: 10px;
margin-left:10px; border: 1px solid #cccccc;
border:1px solid #cccccc;
border-radius: 12px; border-radius: 12px;
cursor:pointer cursor: pointer;
}
} .box-style {
.box-style{ width: 90px;
width:90px; height: 24px;
height:24px; display: flex;
display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-bottom: 2px; padding-bottom: 2px;
} }
.second-title{ .second-title {
margin-top:20px; margin-top: 20px;
font-size: 14px; font-size: 14px;
color:#979eb9; color: #979eb9;
cursor:pointer cursor: pointer;
} }
.line-style{ .line-style {
width:100%; width: 100%;
height:1px; height: 1px;
background-color:#f5f6fa; background-color: #f5f6fa;
margin-top:15px; margin-top: 15px;
margin-bottom:15px; margin-bottom: 15px;
} }
.aui-card--fill{ .aui-card--fill {
width:100% !important; width: 100% !important;
padding: 0px !important; padding: 0px !important;
} }
.choseStyle{ .choseStyle {
color:#526aff; color: #526aff;
border:1px solid #526aff border: 1px solid #526aff;
} }
.departmentStyle{ .departmentStyle {
color:#526aff color: #526aff;
} }
::v-deep .tree-text-styleJ{ ::v-deep .tree-text-styleJ {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} word-break: break-all;
}
</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(
to right,
rgba(204, 204, 204, 0.6), rgba(204, 204, 204, 0.6),
rgba(0, 0, 0, 0)); 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(
to right,
rgba(251, 59, 5, 0.6), rgba(251, 59, 5, 0.6),
rgba(0, 0, 0, 0)); 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(
to right,
rgba(251, 123, 5, 0.6), rgba(251, 123, 5, 0.6),
rgba(0, 0, 0, 0)); 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(
to right,
rgba(250, 179, 2, 0.6), rgba(250, 179, 2, 0.6),
rgba(0, 0, 0, 0)); 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,7 +43,7 @@
</template> </template>
<script> <script>
export default { export default {
data() { data () {
return { return {
} }
@ -56,17 +56,17 @@ export default {
title: { title: {
type: String, type: String,
default: '' default: ''
}, }
}, },
methods: { methods: {
formatNum(num) { formatNum (num) {
return num || num === 0 ? num : '--' return num || num === 0 ? num : '--'
}, },
goPage(url) { goPage (url) {
this.$router.push({ this.$router.push({
path: url path: url
}); })
}, }
} }
} }
</script> </script>
@ -76,6 +76,7 @@ export default {
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 {

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 {