monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit abcdde6d737106c08203b7dda4406873a49374d9 1 parent dc43af55

腾讯云页面增加云硬盘和TDSQL资源---优化

Inline Side-by-side
Showing 4 changed files with 34 additions and 32 deletions
... ... @@ -56,14 +56,18 @@
<div class="res-ratio">
<div>使用容量</div>
<div class="progress">
<div :style="{width:((cloudList[4].map[cloudList[4].kpiIds].kpiValue/cloudList[5].map[cloudList[5].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar"><span>{{cloudList[5].map[cloudList[5].kpiIds].kpiValue==0?'':((cloudList[4].map[cloudList[4].kpiIds].kpiValue/cloudList[5].map[cloudList[5].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span></div>
<div v-show="cloudList[5].map[cloudList[5].kpiIds].kpiValue!=0" :style="{width:((cloudList[4].map[cloudList[4].kpiIds].kpiValue/cloudList[5].map[cloudList[5].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar">
<span>{{cloudList[5].map[cloudList[5].kpiIds].kpiValue==0?'':((cloudList[4].map[cloudList[4].kpiIds].kpiValue/cloudList[5].map[cloudList[5].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span>
</div>
</div>
<div>已使用：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}/总量：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}</div>
</div>
<div class="res-ratio">
<div>售卖容量</div>
<div class="progress">
<div :style="{width:((cloudList[6].map[cloudList[6].kpiIds].kpiValue/cloudList[7].map[cloudList[7].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar"><span>{{cloudList[7].map[cloudList[7].kpiIds].kpiValue==0?'':((cloudList[6].map[cloudList[6].kpiIds].kpiValue/cloudList[7].map[cloudList[7].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span></div>
<div v-show="cloudList[7].map[cloudList[7].kpiIds].kpiValue!=0" :style="{width:((cloudList[6].map[cloudList[6].kpiIds].kpiValue/cloudList[7].map[cloudList[7].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar">
<span>{{cloudList[7].map[cloudList[7].kpiIds].kpiValue==0?'':((cloudList[6].map[cloudList[6].kpiIds].kpiValue/cloudList[7].map[cloudList[7].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span>
</div>
</div>
<div>已使用：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}/总量：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}</div>
</div>
... ...
... ... @@ -16,58 +16,53 @@ export default {
flag: 'capacity-disk-snapshotCount',
kpiIds:'KPI2AABE086',
name:'快照数量',
map:{}
},{
// 快照已使用容量
flag: 'capacity-disk-snapshotSize',
kpiIds:'KPIF1297210',
name:'快照已使用容量',
map:{}
},{
// 云硬盘总数
flag: 'capacity-disk-count',
kpiIds:'KPI4F8DDF84',
name:"云硬盘总数",
map:{}
},{
// 高效云硬盘数
flag: 'capacity-disk-totalDiskCount',
kpiIds:'KPI16AC2C58',
name:'高效云硬盘数',
map:{}
},{
// 使用容量 已使用
flag: 'capacity-disk-used',
kpiIds:'KPI1988842F',
name:'使用容量 (已使用)',
map:{}
},{
// 使用容量 总量
flag: 'capacity-disk-used',
kpiIds:'KPIBA50E567',
name: '使用容量 (总量)',
map:{}
},{
// 售卖容量 已用
flag: 'capacity-disk-sale',
kpiIds:'KPI1988842F',
name: '售卖容量 (已用)',
map:{}
},{
// 售卖容量 总量
flag: 'capacity-disk-sale',
kpiIds:'KPIBA50E567',
name: '售卖容量 (总量)',
map:{}
}
]
let getList = ()=>{
// 快照数量
// proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
// resId:resId,
// flag:"capacity-disk-snapshotCount",
// kpiIds:"KPI2AABE086",
// },(res)=>{
// // console.log(res);
// if (Object.keys(res.map).length){
//
// }
// },(err)=>{
// console.log(err);
// })
cloudList.value.forEach((item,index)=>{
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:resId,
... ... @@ -77,7 +72,11 @@ export default {
if (Object.keys(res.map).length){
item.map = res.map;
}else {
item.map = {};
item.map = {
[item.kpiIds]:{
kpiValue:0
}
};
}
},(err)=>{
console.log(err);
... ...
... ... @@ -33,21 +33,27 @@
<div class="res-ratio">
<div>CPU</div>
<div class="progress">
<div :style="{width:((cloudList[3].map[cloudList[3].kpiIds].kpiValue/cloudList[4].map[cloudList[4].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar"><span>{{cloudList[4].map[cloudList[4].kpiIds].kpiValue==0?'':((cloudList[3].map[cloudList[3].kpiIds].kpiValue/cloudList[4].map[cloudList[4].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span></div>
<div v-show="cloudList[4].map[cloudList[4].kpiIds].kpiValue!=0" :style="{width:((cloudList[3].map[cloudList[3].kpiIds].kpiValue/cloudList[4].map[cloudList[4].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar">
<span>{{cloudList[4].map[cloudList[4].kpiIds].kpiValue==0?'':((cloudList[3].map[cloudList[3].kpiIds].kpiValue/cloudList[4].map[cloudList[4].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span>
</div>
</div>
<div>已使用：{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}/总量：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}(核)</div>
</div>
<div class="res-ratio">
<div>内存</div>
<div class="progress">
<div :style="{width:((cloudList[5].map[cloudList[5].kpiIds].kpiValue/cloudList[6].map[cloudList[6].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar"><span>{{cloudList[6].map[cloudList[6].kpiIds].kpiValue==0?'':((cloudList[5].map[cloudList[5].kpiIds].kpiValue/cloudList[6].map[cloudList[6].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span></div>
<div v-show="cloudList[6].map[cloudList[6].kpiIds].kpiValue!=0" :style="{width:((cloudList[5].map[cloudList[5].kpiIds].kpiValue/cloudList[6].map[cloudList[6].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar">
<span>{{cloudList[6].map[cloudList[6].kpiIds].kpiValue==0?'':((cloudList[5].map[cloudList[5].kpiIds].kpiValue/cloudList[6].map[cloudList[6].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span>
</div>
</div>
<div>已使用：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}/总量：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}(T)</div>
</div>
<div class="res-ratio">
<div>磁盘</div>
<div class="progress">
<div :style="{width:((cloudList[7].map[cloudList[7].kpiIds].kpiValue/cloudList[8].map[cloudList[8].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar"><span>{{cloudList[8].map[cloudList[8].kpiIds].kpiValue==0?'':((cloudList[7].map[cloudList[7].kpiIds].kpiValue/cloudList[8].map[cloudList[8].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span></div>
<div v-show="cloudList[8].map[cloudList[8].kpiIds].kpiValue!=0" :style="{width:((cloudList[7].map[cloudList[7].kpiIds].kpiValue/cloudList[8].map[cloudList[8].kpiIds].kpiValue)*100).toFixed(2)+'%'}" class="progress-bar">
<span>{{cloudList[8].map[cloudList[8].kpiIds].kpiValue==0?'':((cloudList[7].map[cloudList[7].kpiIds].kpiValue/cloudList[8].map[cloudList[8].kpiIds].kpiValue)*100).toFixed(2)+'%'}}</span>
</div>
</div>
<div>已使用：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}/总量：{{cloudList[8].map[cloudList[8].kpiIds].kpiValue}}(T)</div>
</div>
... ...
... ... @@ -69,19 +69,6 @@ export default {
]
let getList = ()=>{
// 快照数量
// proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
// resId:resId,
// flag:"capacity-disk-snapshotCount",
// kpiIds:"KPI2AABE086",
// },(res)=>{
// // console.log(res);
// if (Object.keys(res.map).length){
//
// }
// },(err)=>{
// console.log(err);
// })
cloudList.value.forEach((item,index)=>{
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:resId,
... ... @@ -90,6 +77,12 @@ export default {
},(res)=>{
if (Object.keys(res.map).length){
item.map = res.map;
}else {
item.map = {
[item.kpiIds]:{
kpiValue:0
}
};
}
},(err)=>{
console.log(err);
... ...