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 @@ @@ -56,14 +56,18 @@
56 <div class="res-ratio"> 56 <div class="res-ratio">
57 <div>使用容量</div> 57 <div>使用容量</div>
58 <div class="progress"> 58 <div class="progress">
59 - <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> 59 + <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">
  60 + <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>
  61 + </div>
60 </div> 62 </div>
61 <div>已使用：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}/总量：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}</div> 63 <div>已使用：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}/总量：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}</div>
62 </div> 64 </div>
63 <div class="res-ratio"> 65 <div class="res-ratio">
64 <div>售卖容量</div> 66 <div>售卖容量</div>
65 <div class="progress"> 67 <div class="progress">
66 - <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> 68 + <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">
  69 + <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>
  70 + </div>
67 </div> 71 </div>
68 <div>已使用：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}/总量：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}</div> 72 <div>已使用：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}/总量：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}</div>
69 </div> 73 </div>
@@ -16,58 +16,53 @@ export default { @@ -16,58 +16,53 @@ export default {
16 flag: 'capacity-disk-snapshotCount', 16 flag: 'capacity-disk-snapshotCount',
17 kpiIds:'KPI2AABE086', 17 kpiIds:'KPI2AABE086',
18 name:'快照数量', 18 name:'快照数量',
  19 + map:{}
19 },{ 20 },{
20 // 快照已使用容量 21 // 快照已使用容量
21 flag: 'capacity-disk-snapshotSize', 22 flag: 'capacity-disk-snapshotSize',
22 kpiIds:'KPIF1297210', 23 kpiIds:'KPIF1297210',
23 name:'快照已使用容量', 24 name:'快照已使用容量',
  25 + map:{}
24 },{ 26 },{
25 // 云硬盘总数 27 // 云硬盘总数
26 flag: 'capacity-disk-count', 28 flag: 'capacity-disk-count',
27 kpiIds:'KPI4F8DDF84', 29 kpiIds:'KPI4F8DDF84',
28 name:"云硬盘总数", 30 name:"云硬盘总数",
  31 + map:{}
29 },{ 32 },{
30 // 高效云硬盘数 33 // 高效云硬盘数
31 flag: 'capacity-disk-totalDiskCount', 34 flag: 'capacity-disk-totalDiskCount',
32 kpiIds:'KPI16AC2C58', 35 kpiIds:'KPI16AC2C58',
33 name:'高效云硬盘数', 36 name:'高效云硬盘数',
  37 + map:{}
34 },{ 38 },{
35 // 使用容量 已使用 39 // 使用容量 已使用
36 flag: 'capacity-disk-used', 40 flag: 'capacity-disk-used',
37 kpiIds:'KPI1988842F', 41 kpiIds:'KPI1988842F',
38 name:'使用容量 (已使用)', 42 name:'使用容量 (已使用)',
  43 + map:{}
39 },{ 44 },{
40 // 使用容量 总量 45 // 使用容量 总量
41 flag: 'capacity-disk-used', 46 flag: 'capacity-disk-used',
42 kpiIds:'KPIBA50E567', 47 kpiIds:'KPIBA50E567',
43 name: '使用容量 (总量)', 48 name: '使用容量 (总量)',
  49 + map:{}
44 },{ 50 },{
45 // 售卖容量 已用 51 // 售卖容量 已用
46 flag: 'capacity-disk-sale', 52 flag: 'capacity-disk-sale',
47 kpiIds:'KPI1988842F', 53 kpiIds:'KPI1988842F',
48 name: '售卖容量 (已用)', 54 name: '售卖容量 (已用)',
  55 + map:{}
49 },{ 56 },{
50 // 售卖容量 总量 57 // 售卖容量 总量
51 flag: 'capacity-disk-sale', 58 flag: 'capacity-disk-sale',
52 kpiIds:'KPIBA50E567', 59 kpiIds:'KPIBA50E567',
53 name: '售卖容量 (总量)', 60 name: '售卖容量 (总量)',
  61 + map:{}
54 } 62 }
55 ] 63 ]
56 64
57 let getList = ()=>{ 65 let getList = ()=>{
58 - // 快照数量  
59 - // proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{  
60 - // resId:resId,  
61 - // flag:"capacity-disk-snapshotCount",  
62 - // kpiIds:"KPI2AABE086",  
63 - // },(res)=>{  
64 - // // console.log(res);  
65 - // if (Object.keys(res.map).length){  
66 - //  
67 - // }  
68 - // },(err)=>{  
69 - // console.log(err);  
70 - // })  
71 cloudList.value.forEach((item,index)=>{ 66 cloudList.value.forEach((item,index)=>{
72 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{ 67 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
73 resId:resId, 68 resId:resId,
@@ -77,7 +72,11 @@ export default { @@ -77,7 +72,11 @@ export default {
77 if (Object.keys(res.map).length){ 72 if (Object.keys(res.map).length){
78 item.map = res.map; 73 item.map = res.map;
79 }else { 74 }else {
80 - item.map = {}; 75 + item.map = {
  76 + [item.kpiIds]:{
  77 + kpiValue:0
  78 + }
  79 + };
81 } 80 }
82 },(err)=>{ 81 },(err)=>{
83 console.log(err); 82 console.log(err);
@@ -33,21 +33,27 @@ @@ -33,21 +33,27 @@
33 <div class="res-ratio"> 33 <div class="res-ratio">
34 <div>CPU</div> 34 <div>CPU</div>
35 <div class="progress"> 35 <div class="progress">
36 - <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> 36 + <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">
  37 + <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>
  38 + </div>
37 </div> 39 </div>
38 <div>已使用：{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}/总量：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}(核)</div> 40 <div>已使用：{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}/总量：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}(核)</div>
39 </div> 41 </div>
40 <div class="res-ratio"> 42 <div class="res-ratio">
41 <div>内存</div> 43 <div>内存</div>
42 <div class="progress"> 44 <div class="progress">
43 - <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> 45 + <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">
  46 + <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>
  47 + </div>
44 </div> 48 </div>
45 <div>已使用：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}/总量：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}(T)</div> 49 <div>已使用：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}/总量：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}(T)</div>
46 </div> 50 </div>
47 <div class="res-ratio"> 51 <div class="res-ratio">
48 <div>磁盘</div> 52 <div>磁盘</div>
49 <div class="progress"> 53 <div class="progress">
50 - <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> 54 + <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">
  55 + <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>
  56 + </div>
51 </div> 57 </div>
52 <div>已使用：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}/总量：{{cloudList[8].map[cloudList[8].kpiIds].kpiValue}}(T)</div> 58 <div>已使用：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}/总量：{{cloudList[8].map[cloudList[8].kpiIds].kpiValue}}(T)</div>
53 </div> 59 </div>
@@ -69,19 +69,6 @@ export default { @@ -69,19 +69,6 @@ export default {
69 ] 69 ]
70 70
71 let getList = ()=>{ 71 let getList = ()=>{
72 - // 快照数量  
73 - // proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{  
74 - // resId:resId,  
75 - // flag:"capacity-disk-snapshotCount",  
76 - // kpiIds:"KPI2AABE086",  
77 - // },(res)=>{  
78 - // // console.log(res);  
79 - // if (Object.keys(res.map).length){  
80 - //  
81 - // }  
82 - // },(err)=>{  
83 - // console.log(err);  
84 - // })  
85 cloudList.value.forEach((item,index)=>{ 72 cloudList.value.forEach((item,index)=>{
86 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{ 73 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
87 resId:resId, 74 resId:resId,
@@ -90,6 +77,12 @@ export default { @@ -90,6 +77,12 @@ export default {
90 },(res)=>{ 77 },(res)=>{
91 if (Object.keys(res.map).length){ 78 if (Object.keys(res.map).length){
92 item.map = res.map; 79 item.map = res.map;
  80 + }else {
  81 + item.map = {
  82 + [item.kpiIds]:{
  83 + kpiValue:0
  84 + }
  85 + };
93 } 86 }
94 },(err)=>{ 87 },(err)=>{
95 console.log(err); 88 console.log(err);