后台加overflow: hidden;
This commit is contained in:
gaoyuanwei
parent
52ece255f3
commit
cc633449ed
|
|
@ -58,503 +58,497 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
props:{
|
||||
tableId:{
|
||||
type:String,
|
||||
default:''
|
||||
props: {
|
||||
tableId: {
|
||||
type: String,
|
||||
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:{
|
||||
type:Number,
|
||||
default:null,
|
||||
}
|
||||
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)
|
||||
},
|
||||
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},]
|
||||
}
|
||||
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)
|
||||
},
|
||||
created(){
|
||||
if(this.fatherId===1){
|
||||
this.getBeCalled()
|
||||
this.getBeApplied()
|
||||
this.getAlgorithm()
|
||||
this.getDistributed()
|
||||
this.getScoreList()
|
||||
}else{
|
||||
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,
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
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'
|
||||
},
|
||||
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);
|
||||
},
|
||||
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);
|
||||
},
|
||||
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: {
|
||||
// 使用回调函数
|
||||
formatter: function (name) {
|
||||
var data = option.series[0].data
|
||||
var total = 0
|
||||
var tarValue
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += Number(data[i].value)
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value
|
||||
}
|
||||
}
|
||||
// var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100))
|
||||
console.log('@@@@', tarValue, total)
|
||||
return `{a|${name}} {b|${p}%}`
|
||||
},
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
rich: {
|
||||
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: "#000000",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
color: "#666666",
|
||||
backgroundColor: "transparent",
|
||||
padding:[0,8,0,18]
|
||||
},
|
||||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: '#000000',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
width: 35,
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center:['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data:this.data3
|
||||
}
|
||||
]
|
||||
};
|
||||
color: '#666666',
|
||||
backgroundColor: 'transparent',
|
||||
padding: [0, 8, 0, 18]
|
||||
}
|
||||
},
|
||||
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['22%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: '40',
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeChild2')
|
||||
}
|
||||
}
|
||||
option && myChart.setOption(option)
|
||||
},
|
||||
backBtn () {
|
||||
this.$emit('closeChild2')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.container{
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.container {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-style {
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-introduction {
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn {
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249, 0);
|
||||
color: #fff;
|
||||
margin-left: 1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.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: 640px;
|
||||
height: 250px;
|
||||
background-color: #ffffff;
|
||||
margin-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.container-body3 {
|
||||
width: 640px;
|
||||
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;
|
||||
background-image: url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.container-body5 {
|
||||
width: 640px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
background-image: url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.ranking-img {
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
line-height: 26px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 10px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.num-style {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin-left: 90px;
|
||||
width: 200px;
|
||||
margin-top: 5px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
.count-style {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
margin-left: 400px;
|
||||
margin-top: 5px;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title-style{
|
||||
font-size: 24px;
|
||||
color:#000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-introduction{
|
||||
font-size: 18px;
|
||||
color:#666666;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.back-btn{
|
||||
background: #3e8ef7;
|
||||
border-color: rgba(101, 165, 249,0);
|
||||
color: #FFF;
|
||||
margin-left:1030px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.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:640px;
|
||||
height:250px;
|
||||
background-color: #ffffff;
|
||||
margin-right:20px;
|
||||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.container-body3{
|
||||
width:640px;
|
||||
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;
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.container-body5{
|
||||
width:640px;
|
||||
height:300px;
|
||||
background-color: #ffffff;
|
||||
padding-top:20px;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
background-image:url("../../../assets/img/排行榜背景图.png");
|
||||
background-repeat:no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.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
|
||||
}
|
||||
.ranking-img{
|
||||
width:60px;
|
||||
height:26px;
|
||||
display: flex;
|
||||
line-height: 26px;
|
||||
margin-bottom:15px;
|
||||
margin-right:10px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.num-style{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
margin-left:90px;
|
||||
width:200px;
|
||||
margin-top:5px;
|
||||
color:#333333;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.count-style{
|
||||
position:absolute;
|
||||
display: flex;
|
||||
margin-left:400px;
|
||||
margin-top:5px;
|
||||
color:#333333;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -131,202 +131,195 @@ import componentServices from './componentServices.vue'
|
|||
import applicationResources from './applicationResources.vue'
|
||||
import ComponentUsed from './componentUsed.vue'
|
||||
export default {
|
||||
components:{componentServices,applicationResources, ComponentUsed},
|
||||
data(){
|
||||
return{
|
||||
inputTxt:'',
|
||||
tableId:'',
|
||||
fatherId:'',
|
||||
treeData: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
total:null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
choseId:0,
|
||||
departmentId:1,
|
||||
currentPage: 1,
|
||||
homeIsShow:true,
|
||||
servicesIsShow:false,
|
||||
resourcesIsShow:false,
|
||||
UsedIsShow:false,
|
||||
titleList:[
|
||||
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
|
||||
],
|
||||
tableData: [{deptName:'部门',resourceNum:222}]
|
||||
components: { componentServices, applicationResources, ComponentUsed },
|
||||
data () {
|
||||
return {
|
||||
inputTxt: '',
|
||||
tableId: '',
|
||||
fatherId: '',
|
||||
treeData: [{
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
label: '二级 2-1',
|
||||
children: [{
|
||||
label: '三级 2-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 2-2',
|
||||
children: [{
|
||||
label: '三级 2-2-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
label: '二级 3-1',
|
||||
children: [{
|
||||
label: '三级 3-1-1'
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
children: [{
|
||||
label: '三级 3-2-1'
|
||||
}]
|
||||
}]
|
||||
}],
|
||||
total: null,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
choseId: 0,
|
||||
departmentId: 1,
|
||||
currentPage: 1,
|
||||
homeIsShow: true,
|
||||
servicesIsShow: false,
|
||||
resourcesIsShow: false,
|
||||
UsedIsShow: false,
|
||||
titleList: [
|
||||
{ name: '组件服务', key: 1 }, { name: '应用资源', key: 2 }, { name: '基础设施', key: 3 }, { name: '数据资源', key: 3 }, { name: '知识库', key: 3 }
|
||||
],
|
||||
tableData: [{ deptName: '部门', resourceNum: 222 }]
|
||||
}
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
created(){
|
||||
|
||||
// // 获取部门列表
|
||||
// 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) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
page: page || 1,
|
||||
limit: 5,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
mounted(){
|
||||
this.getFirstTree()
|
||||
// 组件服务部门使用情况列表
|
||||
getSecondTree () {
|
||||
this.$http.get('/census/center/v3/resourceUsedDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: 1,
|
||||
// id:'1067246875800000064',
|
||||
resourceType: '组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
})
|
||||
},
|
||||
// 应用资源部门发布情况列表
|
||||
getReleaseTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: page || 1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
// 应用资源部门使用情况列表
|
||||
getUsedTree () {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/', {
|
||||
params: {
|
||||
limit: 5,
|
||||
page: 1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType: '应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData = res.data.data.list
|
||||
})
|
||||
},
|
||||
handleClick (row) {
|
||||
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)
|
||||
},
|
||||
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) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
page:page||1,
|
||||
limit:5,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
})
|
||||
},
|
||||
// 组件服务部门使用情况列表
|
||||
getSecondTree () {
|
||||
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
|
||||
params : {
|
||||
limit:5,
|
||||
page:1,
|
||||
// id:'1067246875800000064',
|
||||
resourceType:'组件服务'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
|
||||
})
|
||||
},
|
||||
// 应用资源部门发布情况列表
|
||||
getReleaseTree (page) {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
limit:5,
|
||||
page:page||1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
this.total = res.data.data.total
|
||||
|
||||
})
|
||||
},
|
||||
// 应用资源部门使用情况列表
|
||||
getUsedTree () {
|
||||
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
|
||||
params : {
|
||||
limit:5,
|
||||
page:1,
|
||||
// id:'1067246875800000066',
|
||||
resourceType:'应用资源'
|
||||
}
|
||||
}).then(res => {
|
||||
this.tableData =res.data.data.list
|
||||
|
||||
})
|
||||
},
|
||||
handleClick(row) {
|
||||
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){
|
||||
// this.choseId=index
|
||||
// if (index===0){
|
||||
|
|
@ -338,164 +331,162 @@ export default {
|
|||
// this.resourcesIsShow=true
|
||||
// }
|
||||
// },
|
||||
//选择发布or使用表格
|
||||
handleChose(index){
|
||||
this.departmentId=index
|
||||
if(index===1){
|
||||
if(this.choseId===0){
|
||||
this.getFirstTree()
|
||||
}else if(this.choseId===1){
|
||||
this.getReleaseTree()
|
||||
}
|
||||
}else if(index===2){
|
||||
if(this.choseId===0){
|
||||
this.getSecondTree()
|
||||
}else{
|
||||
this.getUsedTree()
|
||||
}
|
||||
// 选择发布or使用表格
|
||||
handleChose (index) {
|
||||
this.departmentId = index
|
||||
if (index === 1) {
|
||||
if (this.choseId === 0) {
|
||||
this.getFirstTree()
|
||||
} else if (this.choseId === 1) {
|
||||
this.getReleaseTree()
|
||||
}
|
||||
} else if (index === 2) {
|
||||
if (this.choseId === 0) {
|
||||
this.getSecondTree()
|
||||
} else {
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
display: flex;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
.container-left{
|
||||
width:250px;
|
||||
height:1000px;
|
||||
display: inline-block;
|
||||
// background-color: #ffffff;
|
||||
margin-right:10px
|
||||
.container-left {
|
||||
width: 250px;
|
||||
height: 1000px;
|
||||
display: inline-block;
|
||||
// background-color: #ffffff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.left-search{
|
||||
width:250px;
|
||||
height:76px;
|
||||
background-color: #ffffff;
|
||||
.left-search {
|
||||
width: 250px;
|
||||
height: 76px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.input-style{
|
||||
width:210px;
|
||||
height:36px;
|
||||
margin:20px 20px;
|
||||
padding-left: 20px;
|
||||
border-radius: 18px;
|
||||
border:1px solid transparent;
|
||||
background-color: #f2f4fa;
|
||||
.input-style {
|
||||
width: 210px;
|
||||
height: 36px;
|
||||
margin: 20px 20px;
|
||||
padding-left: 20px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background-color: #f2f4fa;
|
||||
}
|
||||
input::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #b0b3ca;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #b0b3ca;
|
||||
}
|
||||
.input-search{
|
||||
width:44px;
|
||||
height:30px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
top:38px;
|
||||
left:196px;
|
||||
.input-search {
|
||||
width: 44px;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 15px;
|
||||
top: 38px;
|
||||
left: 196px;
|
||||
}
|
||||
::v-deep.tree-style {
|
||||
.el-tree-node__label{
|
||||
font-size:16px;
|
||||
}
|
||||
.el-tree-node__content{
|
||||
width:240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
::v-deep.tree-style {
|
||||
.el-tree-node__label {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-tree-node__content {
|
||||
width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.top-box{
|
||||
height:80px;
|
||||
width:100%;
|
||||
background-color: #fafafc;
|
||||
display: inline-block;
|
||||
.top-box {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: #fafafc;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -698,6 +698,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.boxcontent {
|
||||
width: 100%;
|
||||
|
|
@ -707,6 +708,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
.preview-dialog {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -570,7 +570,7 @@ export default {
|
|||
height: 28px;
|
||||
margin-left: 14px;
|
||||
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) {
|
||||
|
|
@ -609,7 +609,7 @@ export default {
|
|||
left: 50%;
|
||||
margin-left: -45.5px;
|
||||
margin-top: -45.5px;
|
||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
|
||||
background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png");
|
||||
cursor: pointer;
|
||||
}
|
||||
> span {
|
||||
|
|
@ -618,7 +618,7 @@ export default {
|
|||
padding-top: 5px;
|
||||
padding-left: 20px;
|
||||
font-size: 26px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
.add-enterprise-input-wrap {
|
||||
// height: 50px;
|
||||
|
|
@ -656,7 +656,7 @@ export default {
|
|||
background: #0fa7f6;
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -704,7 +704,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -713,7 +713,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding-top: 4px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -724,7 +724,7 @@ export default {
|
|||
.enterprise-card-tip-first:before,
|
||||
.enterprise-card-tip-first:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
content: " ";
|
||||
top: 32px;
|
||||
left: -16px;
|
||||
display: block;
|
||||
|
|
@ -752,7 +752,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -761,7 +761,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding-top: 4px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -772,7 +772,7 @@ export default {
|
|||
.enterprise-card-tip-third:before,
|
||||
.enterprise-card-tip-third:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
content: " ";
|
||||
top: 32px;
|
||||
left: 180px;
|
||||
display: block;
|
||||
|
|
@ -801,7 +801,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -810,7 +810,7 @@ export default {
|
|||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding-top: 4px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -821,7 +821,7 @@ export default {
|
|||
.enterprise-card-tip-second:before,
|
||||
.enterprise-card-tip-second:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
content: " ";
|
||||
top: -15px;
|
||||
left: 78px;
|
||||
display: block;
|
||||
|
|
@ -836,7 +836,7 @@ export default {
|
|||
width: 100%;
|
||||
// height: 373px;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
|
@ -845,15 +845,17 @@ export default {
|
|||
padding-top: 10px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
|
@ -867,7 +869,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 30px;
|
||||
padding-left: 19px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
vertical-align: middle;
|
||||
|
|
@ -899,7 +901,7 @@ export default {
|
|||
position: absolute;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
|
||||
background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png");
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -908,7 +910,7 @@ export default {
|
|||
}
|
||||
input::-webkit-input-placeholder {
|
||||
font-size: 14px;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-family: "Microsoft YaHei";
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ import * as echarts from 'echarts'
|
|||
export default {
|
||||
// components: {},
|
||||
// props: {},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
// 排行榜
|
||||
RankingData: [
|
||||
|
|
@ -169,20 +169,20 @@ export default {
|
|||
total: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.myEchars()
|
||||
// 分页
|
||||
this.total = this.AnomalyStatisticsTable.length
|
||||
},
|
||||
methods: {
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
handleSizeChange (val) {
|
||||
console.log(`每页 ${val} 条`)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
handleCurrentChange (val) {
|
||||
console.log(`当前页: ${val}`)
|
||||
},
|
||||
myEchars() {
|
||||
myEchars () {
|
||||
var chartDom = document.getElementById('main')
|
||||
var myChart = echarts.init(chartDom)
|
||||
var option
|
||||
|
|
@ -276,7 +276,8 @@ export default {
|
|||
}
|
||||
|
||||
.ApiBox {
|
||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
|
||||
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
width: 22.5rem;
|
||||
height: 6.875rem;
|
||||
|
|
@ -313,7 +314,8 @@ export default {
|
|||
}
|
||||
|
||||
.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%;
|
||||
|
||||
div {
|
||||
|
|
@ -383,9 +385,11 @@ export default {
|
|||
display: block;
|
||||
height: 1.25rem;
|
||||
width: 2.25rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(204, 204, 204, 0.6),
|
||||
rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(204, 204, 204, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -401,6 +405,7 @@ export default {
|
|||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -412,9 +417,11 @@ export default {
|
|||
|
||||
.RankingListData:nth-of-type(1) i b {
|
||||
width: 3.75rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(251, 59, 5, 0.6),
|
||||
rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(251, 59, 5, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(1) span {
|
||||
|
|
@ -423,9 +430,11 @@ export default {
|
|||
|
||||
.RankingListData:nth-of-type(2) i b {
|
||||
width: 3.125rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(251, 123, 5, 0.6),
|
||||
rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(251, 123, 5, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(2) span {
|
||||
|
|
@ -434,9 +443,11 @@ export default {
|
|||
|
||||
.RankingListData:nth-of-type(3) i b {
|
||||
width: 2.75rem;
|
||||
background: linear-gradient(to right,
|
||||
rgba(250, 179, 2, 0.6),
|
||||
rgba(0, 0, 0, 0));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(250, 179, 2, 0.6),
|
||||
rgba(0, 0, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
.RankingListData:nth-of-type(3) span {
|
||||
|
|
@ -447,7 +458,8 @@ export default {
|
|||
.AbnormalDistribution {
|
||||
margin-right: 3.75rem;
|
||||
|
||||
.container-body1 {}
|
||||
.container-body1 {
|
||||
}
|
||||
}
|
||||
|
||||
.AnomalyStatistics {
|
||||
|
|
@ -472,12 +484,12 @@ export default {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tablePagination {
|
||||
|
|
|
|||
|
|
@ -1298,6 +1298,7 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
word-break: break-all;
|
||||
}
|
||||
div:last-child {
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
components: {
|
||||
contentTitle
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
|
||||
list: [],
|
||||
|
|
@ -77,13 +77,13 @@ export default {
|
|||
loadingTable: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.getResourceByDept()
|
||||
this.getApplyByDept()
|
||||
},
|
||||
methods: {
|
||||
// 发布动态
|
||||
getResourceByDept() {
|
||||
getResourceByDept () {
|
||||
const data = {
|
||||
limit: 5,
|
||||
page: 1
|
||||
|
|
@ -109,7 +109,7 @@ export default {
|
|||
)
|
||||
},
|
||||
// 部门推荐能力
|
||||
getApplyByDept() {
|
||||
getApplyByDept () {
|
||||
const data = {
|
||||
limit: 5,
|
||||
page: 1
|
||||
|
|
@ -132,11 +132,11 @@ export default {
|
|||
}
|
||||
)
|
||||
},
|
||||
jumpTo() {
|
||||
jumpTo () {
|
||||
this.$router.push({
|
||||
path: 'activiti-my-work-dynamics'
|
||||
});
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -146,6 +146,7 @@ export default {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
|
|
|
|||
|
|
@ -43,131 +43,132 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data () {
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.ellipsis {
|
||||
//超出一行省略号
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
//超出一行省略号
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.no-margin-left {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.flex-row-bottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flex-row-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dept-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 394px;
|
||||
height: 252px;
|
||||
margin: 16px;
|
||||
background: rgba($color: #f1f3f6, $alpha: 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 394px;
|
||||
height: 252px;
|
||||
margin: 16px;
|
||||
background: rgba($color: #f1f3f6, $alpha: 0.8);
|
||||
}
|
||||
|
||||
.left-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// width: 80px;
|
||||
width: 100px;
|
||||
border-radius: 2px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// width: 80px;
|
||||
width: 100px;
|
||||
border-radius: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
// margin-top: 57px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// margin-top: 57px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 18px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
width: 314px;
|
||||
height: 252px;
|
||||
padding: 0 16px;
|
||||
width: 314px;
|
||||
height: 252px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dashed #c6c6c6;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dashed #c6c6c6;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.more {
|
||||
color: #212121;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
color: #212121;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -113,6 +113,7 @@ export default {
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.flex-row-between {
|
||||
|
|
|
|||
Loading…
Reference in New Issue