feat：优化assetInfo chart显示
This commit is contained in:
wangwenrui
@@ -32,7 +32,6 @@
|
||||
.chart-info-container{
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
display:table;
|
||||
text-align:center;
|
||||
width:calc(100% - 16px);
|
||||
.single-stat-content{
|
||||
@@ -159,6 +158,7 @@
|
||||
.asset-info-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
.basic-container,.feature-container{
|
||||
width: 100%;
|
||||
//height: calc(50% - 4px);
|
||||
@@ -173,6 +173,7 @@
|
||||
flex-wrap:nowrap;
|
||||
padding: 0 5px 0 5px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
.basic-container .basic-title:hover,.feature-container .feature-title:hover{
|
||||
border: 1px solid #C0C4CC;
|
||||
@@ -194,10 +195,10 @@
|
||||
}
|
||||
.content-item{
|
||||
width: 100%;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
.content-item-key{
|
||||
display: inline-block;
|
||||
//height: 25px;
|
||||
@@ -219,7 +220,7 @@
|
||||
}
|
||||
|
||||
}
|
||||
.content-item:hover{
|
||||
.hover-bg:hover{
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,21 +15,21 @@
|
||||
</span>
|
||||
</el-popover>
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span class="chart-title-text">{{data.title}}</span>
|
||||
<span class="chart-title-text">{{$t('asset.createAssetTab.assetInfo')}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10 chart-info-container" v-cloak v-show="firstShow" >
|
||||
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
|
||||
<el-scrollbar style="height: 100%;" ref="scrollbar" class="el-scrollbar-large">
|
||||
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-small">
|
||||
<div style="padding: 0 15px">
|
||||
<div class="basic-container">
|
||||
<div class="basic-title" @click="hideElement('basic')">
|
||||
<div>{{$t('asset.basicTitle')}}</div>
|
||||
<div>{{$t('asset.createAssetTab.basicTitle')}}</div>
|
||||
<div><i :class="{'el-icon-caret-bottom':hideBasic,'el-icon-caret-top':!hideBasic}"></i></div>
|
||||
</div>
|
||||
<div class="basic-content" :class="{'shrink':hideBasic}">
|
||||
<template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
|
||||
<div v-for="(value,key,index) in assetInfos.Basic" :key="index" class="content-item" :class="{'bg-grey':index % 2 == 1}">
|
||||
<div v-for="(value,key,index) in assetInfos.Basic" :key="index" class="content-item hover-bg" :class="{'bg-grey':index % 2 == 1}">
|
||||
<div class="content-item-key">{{replaceSplit(key)}}</div>
|
||||
<div class="content-item-value">{{value}}</div>
|
||||
</div>
|
||||
@@ -38,11 +38,11 @@
|
||||
</div>
|
||||
<div class="feature-container">
|
||||
<div class="feature-title" @click="hideElement('feature')" >
|
||||
<div>{{$t('asset.featureTitle')}}</div>
|
||||
<div>{{$t('asset.createAssetTab.featureTitle')}}</div>
|
||||
<div><i :class="{'el-icon-caret-bottom':hideFeature,'el-icon-caret-top':!hideFeature}"></i></div>
|
||||
</div>
|
||||
<div class="feature-content" :class="{'shrink':hideFeature}">
|
||||
<div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1}">
|
||||
<div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1,'hover-bg':Array.isArray(value) && value.length>0 &&typeof value[0] == 'string'}">
|
||||
<div class="content-item-key" ><div style="vertical-align: middle">{{replaceSplit(key)}}</div></div>
|
||||
<template v-if="typeof value == 'string'">
|
||||
<div class="content-item-value">{{value}}</div>
|
||||
@@ -53,20 +53,19 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-table
|
||||
class="overview-table"
|
||||
class="nz-table asset-info-table"
|
||||
:data="value"
|
||||
tooltip-effect="light"
|
||||
height="100%"
|
||||
ref="dataTable"
|
||||
v-scrollBar:el-table="'large'"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in setLabels(value)"
|
||||
v-if="item.show"
|
||||
:key="`col-${index}`"
|
||||
:width="item.width"
|
||||
:label="item.label"
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template >
|
||||
@@ -327,6 +326,10 @@
|
||||
document.onmousemove=null;
|
||||
document.onmouseup = null;
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.scrollbar.update();
|
||||
})
|
||||
|
||||
},
|
||||
startLoading(area){
|
||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||||
@@ -425,4 +428,10 @@
|
||||
.asset-info-content .el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
.asset-info-table .el-table__body-wrapper{
|
||||
overflow: inherit;
|
||||
}
|
||||
.asset-info-table:hover .ps__rail-x{
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1104,50 +1104,15 @@ export default {
|
||||
},
|
||||
getAssetInfoChartData(chartInfo){
|
||||
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
|
||||
setTimeout(()=>{
|
||||
if(this.additionalInfo){
|
||||
let data={
|
||||
Basic:{
|
||||
sn:'assetInfo Test',
|
||||
host:'192.168.40.42',
|
||||
host1:'192.168.40.42',
|
||||
host2:'192.168.40.42',
|
||||
host3:'192.168.40.42',
|
||||
host4:'192.168.40.42',
|
||||
host5:'192.168.40.42',
|
||||
host6:'192.168.40.42',
|
||||
host7:'192.168.40.42',
|
||||
host8:'192.168.40.42',
|
||||
host9:'192.168.40.42',
|
||||
host10:'192.168.40.42',
|
||||
cpuNum:'8',
|
||||
memery:'12GB',
|
||||
memery$_$free:'3GB'
|
||||
},
|
||||
Feature:{
|
||||
CPU:"Intel E500",
|
||||
Memory:"256GB",
|
||||
NetworkInterface:["eth0","eth1"],
|
||||
Disk:[{
|
||||
mount:"/",
|
||||
total:"256GB",
|
||||
free:"128GB",
|
||||
usageRate:"50%"
|
||||
}]
|
||||
}
|
||||
}
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
}
|
||||
},1000)
|
||||
|
||||
// this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
|
||||
// if(response.code == 200){
|
||||
// let data=response.data;
|
||||
// this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
// }else{
|
||||
// this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
|
||||
// }
|
||||
// })
|
||||
this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
|
||||
if(response.code == 200){
|
||||
let data=response.data;
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
|
||||
}else{
|
||||
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 设置图表的宽度
|
||||
setSize(size, index) {
|
||||
|
||||
@@ -368,6 +368,17 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
|
||||
@@ -446,7 +446,7 @@ const en = {
|
||||
sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
|
||||
exporter:'Exporter',
|
||||
basicTitle:'Basic info',
|
||||
featureTitle:'Feature'
|
||||
featureTitle:'Feature',
|
||||
},
|
||||
editAssetTab:{
|
||||
title:'New asset',//'新增资产'
|
||||
|
||||
Reference in New Issue
Block a user