monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 41543c35d5a9d71bf419d65b7a95bd2cdb3bf47b 2 parents d09a22b0 83db2a3a

Merge branch 'mater-ztq' into 'master' 

Mater ztq



See merge request !1214
Inline Side-by-side
Showing 4 changed files with 134 additions and 42 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,101 @@ export default { @@ -16,58 +16,101 @@ export default {
16 flag: 'capacity-disk-snapshotCount', 16 flag: 'capacity-disk-snapshotCount',
17 kpiIds:'KPI2AABE086', 17 kpiIds:'KPI2AABE086',
18 name:'快照数量', 18 name:'快照数量',
  19 + map:{
  20 + 'KPI2AABE086':{
  21 + kpiValue:0,
  22 + kpiUnit:"个",
  23 + kpiName:"快照数量"
  24 + }
  25 + }
19 },{ 26 },{
20 // 快照已使用容量 27 // 快照已使用容量
21 flag: 'capacity-disk-snapshotSize', 28 flag: 'capacity-disk-snapshotSize',
22 kpiIds:'KPIF1297210', 29 kpiIds:'KPIF1297210',
23 name:'快照已使用容量', 30 name:'快照已使用容量',
  31 + map:{
  32 + 'KPIF1297210':{
  33 + kpiValue:0,
  34 + kpiUnit:"TB",
  35 + kpiName:"快照已使用容量"
  36 + }
  37 + }
24 },{ 38 },{
25 // 云硬盘总数 39 // 云硬盘总数
26 flag: 'capacity-disk-count', 40 flag: 'capacity-disk-count',
27 kpiIds:'KPI4F8DDF84', 41 kpiIds:'KPI4F8DDF84',
28 name:"云硬盘总数", 42 name:"云硬盘总数",
  43 + map:{
  44 + 'KPI4F8DDF84':{
  45 + kpiValue:0,
  46 + kpiUnit:"个",
  47 + kpiName:"云硬盘总数"
  48 + }
  49 + }
29 },{ 50 },{
30 // 高效云硬盘数 51 // 高效云硬盘数
31 flag: 'capacity-disk-totalDiskCount', 52 flag: 'capacity-disk-totalDiskCount',
32 kpiIds:'KPI16AC2C58', 53 kpiIds:'KPI16AC2C58',
33 name:'高效云硬盘数', 54 name:'高效云硬盘数',
  55 + map:{
  56 + 'KPI16AC2C58':{
  57 + kpiValue:0,
  58 + kpiUnit:"个",
  59 + kpiName:"高效云硬盘数"
  60 + }
  61 + }
34 },{ 62 },{
35 // 使用容量 已使用 63 // 使用容量 已使用
36 flag: 'capacity-disk-used', 64 flag: 'capacity-disk-used',
37 kpiIds:'KPI1988842F', 65 kpiIds:'KPI1988842F',
38 name:'使用容量 (已使用)', 66 name:'使用容量 (已使用)',
  67 + map:{
  68 + 'KPI1988842F':{
  69 + kpiValue:0,
  70 + kpiUnit:"",
  71 + kpiName:"使用容量"
  72 + }
  73 + }
39 },{ 74 },{
40 // 使用容量 总量 75 // 使用容量 总量
41 flag: 'capacity-disk-used', 76 flag: 'capacity-disk-used',
42 kpiIds:'KPIBA50E567', 77 kpiIds:'KPIBA50E567',
43 name: '使用容量 (总量)', 78 name: '使用容量 (总量)',
  79 + map:{
  80 + 'KPIBA50E567':{
  81 + kpiValue:0,
  82 + kpiUnit:"",
  83 + kpiName:"使用容量"
  84 + }
  85 + }
44 },{ 86 },{
45 // 售卖容量 已用 87 // 售卖容量 已用
46 flag: 'capacity-disk-sale', 88 flag: 'capacity-disk-sale',
47 kpiIds:'KPI1988842F', 89 kpiIds:'KPI1988842F',
48 name: '售卖容量 (已用)', 90 name: '售卖容量 (已用)',
  91 + map:{
  92 + 'KPI1988842F':{
  93 + kpiValue:0,
  94 + kpiUnit:"",
  95 + kpiName:"售卖容量"
  96 + }
  97 + }
49 },{ 98 },{
50 // 售卖容量 总量 99 // 售卖容量 总量
51 flag: 'capacity-disk-sale', 100 flag: 'capacity-disk-sale',
52 kpiIds:'KPIBA50E567', 101 kpiIds:'KPIBA50E567',
53 name: '售卖容量 (总量)', 102 name: '售卖容量 (总量)',
  103 + map:{
  104 + 'KPIBA50E567':{
  105 + kpiValue:0,
  106 + kpiUnit:"",
  107 + kpiName:"售卖容量"
  108 + }
  109 + }
54 } 110 }
55 ] 111 ]
56 112
57 let getList = ()=>{ 113 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)=>{ 114 cloudList.value.forEach((item,index)=>{
72 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{ 115 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
73 resId:resId, 116 resId:resId,
@@ -76,8 +119,6 @@ export default { @@ -76,8 +119,6 @@ export default {
76 },(res)=>{ 119 },(res)=>{
77 if (Object.keys(res.map).length){ 120 if (Object.keys(res.map).length){
78 item.map = res.map; 121 item.map = res.map;
79 - }else {  
80 - item.map = {};  
81 } 122 }
82 },(err)=>{ 123 },(err)=>{
83 console.log(err); 124 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>
@@ -16,72 +16,113 @@ export default { @@ -16,72 +16,113 @@ export default {
16 flag: 'capacity-mysql-total', 16 flag: 'capacity-mysql-total',
17 kpiIds:'KPI6D78305E', 17 kpiIds:'KPI6D78305E',
18 name:'实例数量', 18 name:'实例数量',
19 - map:{} 19 + map:{
  20 + 'KPI6D78305E':{
  21 + kpiValue:0,
  22 + kpiUnit:"个",
  23 + kpiName:"实例数量"
  24 + }
  25 + }
20 },{ 26 },{
21 // Mysql/MariaDB实例 27 // Mysql/MariaDB实例
22 flag: 'capacity-mysql-mysql-count', 28 flag: 'capacity-mysql-mysql-count',
23 kpiIds:'KPI4149780A', 29 kpiIds:'KPI4149780A',
24 name:'Mysql/MariaDB实例', 30 name:'Mysql/MariaDB实例',
25 - map:{} 31 + map:{
  32 + 'KPI4149780A':{
  33 + kpiValue:0,
  34 + kpiUnit:"个",
  35 + kpiName:"Mysql/MariaDB实例"
  36 + }
  37 + }
26 },{ 38 },{
27 // 分布式Mysql实例 39 // 分布式Mysql实例
28 flag: 'capacity-mysql-distributed', 40 flag: 'capacity-mysql-distributed',
29 kpiIds:'KPIAAF0E124', 41 kpiIds:'KPIAAF0E124',
30 name:"分布式Mysql实例", 42 name:"分布式Mysql实例",
31 - map:{} 43 + map:{
  44 + 'KPIAAF0E124':{
  45 + kpiValue:0,
  46 + kpiUnit:"个",
  47 + kpiName:"分布式Mysql实例"
  48 + }
  49 + }
32 },{ 50 },{
33 // CPU使用情况 已用 51 // CPU使用情况 已用
34 flag: 'capacity-mysql-cpu-used', 52 flag: 'capacity-mysql-cpu-used',
35 kpiIds:'KPIB5848895', 53 kpiIds:'KPIB5848895',
36 name:'CPU使用情况 已用', 54 name:'CPU使用情况 已用',
37 - map:{} 55 + map:{
  56 + 'KPIB5848895':{
  57 + kpiValue:0,
  58 + kpiUnit:"",
  59 + kpiName:"CPU"
  60 + }
  61 + }
38 },{ 62 },{
39 // CPU使用情况 总量 63 // CPU使用情况 总量
40 flag: 'capacity-mysql-cpu-total', 64 flag: 'capacity-mysql-cpu-total',
41 kpiIds:'KPI8DBA891C', 65 kpiIds:'KPI8DBA891C',
42 name:'CPU使用情况 总量', 66 name:'CPU使用情况 总量',
43 - map:{} 67 + map:{
  68 + 'KPI8DBA891C':{
  69 + kpiValue:0,
  70 + kpiUnit:"",
  71 + kpiName:"CPU"
  72 + }
  73 + }
44 },{ 74 },{
45 // 内存使用情况 已用 75 // 内存使用情况 已用
46 flag: 'capacity-mysql-mem-used', 76 flag: 'capacity-mysql-mem-used',
47 kpiIds:'KPI4A216352', 77 kpiIds:'KPI4A216352',
48 name: '内存使用情况 已用', 78 name: '内存使用情况 已用',
49 - map:{} 79 + map:{
  80 + 'KPI4A216352':{
  81 + kpiValue:0,
  82 + kpiUnit:"",
  83 + kpiName:"内存"
  84 + }
  85 + }
50 },{ 86 },{
51 // 内存使用情况 总量 87 // 内存使用情况 总量
52 flag: 'capacity-mysql-mem-total', 88 flag: 'capacity-mysql-mem-total',
53 kpiIds:'KPI1DA60197', 89 kpiIds:'KPI1DA60197',
54 name: '内存使用情况 总量', 90 name: '内存使用情况 总量',
55 - map:{} 91 + map:{
  92 + 'KPI1DA60197':{
  93 + kpiValue:0,
  94 + kpiUnit:"",
  95 + kpiName:"内存"
  96 + }
  97 + }
56 },{ 98 },{
57 // 磁盘使用情况 已用 99 // 磁盘使用情况 已用
58 flag: 'capacity-mysql-disk-used', 100 flag: 'capacity-mysql-disk-used',
59 kpiIds:'KPI1988842F', 101 kpiIds:'KPI1988842F',
60 name: '磁盘使用情况 已用', 102 name: '磁盘使用情况 已用',
61 - map:{} 103 + map:{
  104 + 'KPI1988842F':{
  105 + kpiValue:0,
  106 + kpiUnit:"",
  107 + kpiName:"磁盘"
  108 + }
  109 + }
62 },{ 110 },{
63 //磁盘使用情况 总量 111 //磁盘使用情况 总量
64 flag: 'capacity-mysql-disk-total', 112 flag: 'capacity-mysql-disk-total',
65 kpiIds:'KPIBA50E567', 113 kpiIds:'KPIBA50E567',
66 name: '磁盘使用情况 总量', 114 name: '磁盘使用情况 总量',
67 - map:{} 115 + map:{
  116 + 'KPIBA50E567':{
  117 + kpiValue:0,
  118 + kpiUnit:"",
  119 + kpiName:"磁盘"
  120 + }
  121 + }
68 } 122 }
69 ] 123 ]
70 124
71 let getList = ()=>{ 125 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)=>{ 126 cloudList.value.forEach((item,index)=>{
86 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{ 127 proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
87 resId:resId, 128 resId:resId,