monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit d59a828fd51a2297506ab5d222ee5cba5143216a 1 parent 73094737

腾讯云详情页面

Inline Side-by-side
Showing 5 changed files with 619 additions and 83 deletions
  1 +
  2 +<!--tencent_cloud_plat详细页面-->
  3 +<article class="page-container template template_redis">
  4 + <div class="page-panel">
  5 + <div class="main">
  6 + <div class="layui-card">
  7 + <div class="layui-card-body">
  8 + <div class="lay-row">
  9 + <div class="lay-row-item lay-row-item--big">
  10 + <h5 class="lay-row-title">基本信息<i data-id="tencent_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
  11 + <ul class="info-table" id="tencent_cloud_plat_baseinfo"></ul>
  12 + </div>
  13 + <div class="lay-row-item lay-row-item--small">
  14 + <h5 class="lay-row-title">资源状态</h5>
  15 + <div class="res-state" id="tencent_cloud_plat_health_state"></div>
  16 + </div>
  17 + </div>
  18 + <div class="lay-row">
  19 + <div class="lay-row-item">
  20 + <h5 class="lay-row-title">配额信息<span id="tencent_cloud_plat_settingDownload" class="layui-table-link" style="margin-left: 10px;">下载</span><span id="tencent_cloud_plat_settingMore" class="layui-table-link">更多</span></h5>
  21 + <div id="tencent_cloud_plat_setting"></div>
  22 + </div>
  23 + </div>
  24 + <div class="lay-row">
  25 + <div class="lay-row-item">
  26 + <h5 class="lay-row-title">实时告警动态</h5>
  27 + <div id="tencent_cloud_plat_active_alarm"></div>
  28 + </div>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 +</article>
  35 +<textarea id="tencent_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
  36 +<script>
  37 + layui.use('tencent_cloud_plat', function (fn) {
  38 + var $ = layui.$;
  39 + var parm = $("#tencent_cloud_plat_param_id").val();
  40 + if(parm.indexOf('{{d') != -1){
  41 + fn();
  42 + }else{
  43 + fn(JSON.parse(parm));
  44 + }
  45 + });
  46 +</script>
1 -<!--tencent_cloud_plat_cluster详细页面--> 1 +<style>
  2 + #content{
  3 + padding: 5px;
  4 + background: #f1f4fb;
  5 + }
  6 + .overview{
  7 + display: flex;
  8 + justify-content: flex-start;
  9 + align-items: center;
  10 + }
  11 + .overview>div.overview-item{
  12 + width: 50%;
  13 + box-sizing: border-box;
  14 + }
  15 + .overview-item:nth-of-type(1){
  16 + margin-right: 5px;
  17 + }
  18 + .overview-item-dialog{
  19 + border-radius: 4px;
  20 + padding-left: 10px;
  21 + padding-right: 10px;
  22 + background: #FFFFFF;
  23 + }
  24 + .overview-item-dialog header{
  25 + padding: 10px 0;
  26 + font-size: 18px;
  27 + font-weight: bold;
  28 + }
  29 + .overview-item:nth-of-type(1) .overview-item-dialog header{
  30 + color: #0b50b8;
  31 + border-bottom: 2px solid #d5e5fc;
  32 + }
  33 + .overview-item:nth-of-type(2) .overview-item-dialog header{
  34 + color: #0069a5;
  35 + border-bottom: 2px solid #c3e9f2;
  36 + }
  37 + .overview-item-host,.overview-item-virtualMachine{
  38 + display: flex;
  39 + align-items: center;
  40 + justify-content: flex-start;
  41 + padding: 40px 0px;
  42 + }
  43 + .overview-item-host{
  44 + padding-bottom: 0;
  45 + }
  46 + .overview-item-host .host-img,.overview-item-virtualMachine .virtualMachine-img{
  47 + display: flex;
  48 + flex-direction: column;
  49 + align-items: center;
  50 + padding-right: 20px;
  51 + border-right: 2px solid #d5e5fc;
  52 + }
  53 + .overview-item-host .host-img img,.overview-item-virtualMachine .virtualMachine-img img{
  54 + height: 100px;
  55 + margin-bottom: 30px;
  56 + }
  57 + .overview-item-host .host-num,
  58 + .overview-item-virtualMachine .virtualMachine-num{
  59 + padding-left: 20px;
  60 + flex: 1;
  61 + display: flex;
  62 + justify-content: flex-start;
  63 + align-items: center;
  64 + }
  65 + .overview-item-host .host-num .host-num-item,
  66 + .overview-item-virtualMachine .virtualMachine-num .virtualMachine-num-item{
  67 + display: flex;
  68 + justify-content: flex-start;
  69 + align-items: center;
  70 + flex-direction: column;
  71 + flex: 1;
  72 + }
  73 + .host-num-item-value,.virtualMachine-num-item-value{
  74 + height: 130px;
  75 + line-height: 130px;
  76 + font-size: 28px;
  77 + font-weight: bold;
  78 + }
  79 + .count{
  80 + color: #575d6d;
  81 + }
  82 + .success{
  83 + color:#24ae1b;
  84 + }
  85 + .error{
  86 + color: #d71d04;
  87 + }
  88 + .waring{
  89 + color: #ff7f02;
  90 + }
  91 +
  92 +
  93 + .overview-item-box{
  94 + margin: 5px 0;
  95 + padding-left: 10px;
  96 + padding-right: 10px;
  97 + background: #FFFFFF;
  98 + border-radius: 4px;
  99 + }
  100 + .overview-item-box header{
  101 + font-size: 18px;
  102 + font-weight: bold;
  103 + color: #555c6c;
  104 + padding: 10px 0;
  105 + border-bottom: 2px solid;
  106 + }
  107 + .res-ratio{
  108 + display: flex;
  109 + justify-content: flex-start;
  110 + align-items: center;
  111 + padding: 20px 0px;
  112 + }
  113 + .res-ratio .progress{
  114 + width: 68%;
  115 + margin: 0 10px;
  116 + background-color: #eef7fe;
  117 + overflow: hidden;
  118 + height: 30px;
  119 + border-radius: 30px;
  120 + }
  121 + .progress-bar{
  122 + height: 30px;
  123 + line-height: 30px;
  124 + text-align: right;
  125 + border-radius: 30px;
  126 + background: #469bf5;
  127 + color: #FFFFFF;
  128 + }
  129 +</style>
2 <article class="page-container template template_redis"> 130 <article class="page-container template template_redis">
3 - <div class="page-panel">  
4 - <div class="main">  
5 - <div class="layui-card">  
6 - <div class="layui-card-body">  
7 - <div class="lay-row">  
8 - <div class="lay-row-item">  
9 - <h5 class="lay-row-title">基本信息<i data-id="tencent_cloud_plat_cluster_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>  
10 - <ul class="info-table" id="tencent_cloud_plat_cluster_baseinfo"></ul>  
11 - </div>  
12 - <div class="lay-row-item">  
13 - <h5 class="lay-row-title">重要信息</h5>  
14 - <ul class="info-table" id="tencent_cloud_plat_cluster_keyinfo"></ul>  
15 - </div>  
16 - </div>  
17 - <div class="lay-row">  
18 - <div class="lay-row-item">  
19 - <h5 class="lay-row-title">Node信息</h5>  
20 - <ul class="info-table" id="tencent_cloud_plat_cluster_nodeinfo"></ul>  
21 - </div>  
22 - <div class="lay-row-item">  
23 - <h5 class="lay-row-title">Pod信息</h5>  
24 - <ul class="info-table" id="tencent_cloud_plat_cluster_podinfo"></ul>  
25 - </div>  
26 - <div class="lay-row-item">  
27 - <h5 class="lay-row-title">项目信息</h5>  
28 - <ul class="info-table" id="tencent_cloud_plat_cluster_projectinfo"></ul>  
29 - </div>  
30 - <div class="lay-row-item">  
31 - <h5 class="lay-row-title">应用信息</h5>  
32 - <ul class="info-table" id="tencent_cloud_plat_cluster_appinfo"></ul>  
33 - </div>  
34 - </div>  
35 - <div class="lay-row">  
36 - <div class="lay-row-item">  
37 - <h5 class="lay-row-title">cpu信息</h5>  
38 - <ul class="info-table" id="tencent_cloud_plat_cluster_cpuinfo"></ul>  
39 - </div>  
40 - <div class="lay-row-item">  
41 - <h5 class="lay-row-title">内存信息</h5>  
42 - <ul class="info-table" id="tencent_cloud_plat_cluster_meminfo"></ul>  
43 - </div>  
44 - <div class="lay-row-item">  
45 - <h5 class="lay-row-title">磁盘信息</h5>  
46 - <ul class="info-table" id="tencent_cloud_plat_cluster_diskinfo"></ul>  
47 - </div>  
48 - </div>  
49 - <div class="lay-row">  
50 - <div class="lay-row-item">  
51 - <h5 class="lay-row-title">CPU分配率</h5>  
52 - <div id="tencent_cloud_plat_cluster_cpu_linechart" class="detail_line_chart"></div>  
53 - </div>  
54 - <div class="lay-row-item">  
55 - <h5 class="lay-row-title">内存分配率</h5>  
56 - <div id="tencent_cloud_plat_cluster_mem_linechart" class="detail_line_chart"></div>  
57 - </div>  
58 - <div class="lay-row-item">  
59 - <h5 class="lay-row-title">磁盘分配率</h5>  
60 - <div id="tencent_cloud_plat_cluster_disk_linechart" class="detail_line_chart"></div>  
61 - </div>  
62 - </div>  
63 - <div class="lay-row">  
64 - <div class="lay-row-item">  
65 - <h5 class="lay-row-title">实时告警动态</h5>  
66 - <div id="tencent_cloud_plat_cluster_active_alarm"></div>  
67 - </div>  
68 - </div>  
69 - </div>  
70 - </div>  
71 - </div>  
72 - </div> 131 + <iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 99.5%!important;"/>
73 </article> 132 </article>
74 -<textarea id="tencent_cloud_plat_cluster_param_id" style="display: none;">{{d}}</textarea>  
75 -<script>  
76 - layui.use('tencent_cloud_plat_cluster', function (fn) {  
77 - var $ = layui.$;  
78 - var parm = $("#tencent_cloud_plat_cluster_param_id").val();  
79 - if(parm.indexOf('{{d') != -1){  
80 - fn();  
81 - }else{  
82 - fn(JSON.parse(parm));  
83 - }  
84 - });  
85 -</script>  
@@ -117,6 +117,11 @@ const routes = [{ @@ -117,6 +117,11 @@ const routes = [{
117 name: 'license', 117 name: 'license',
118 component: () => myImport('views/license/index') 118 component: () => myImport('views/license/index')
119 }, 119 },
  120 + {
  121 + path: '/vue3/tencentCloud',
  122 + name: 'tencentCloud',
  123 + component: ()=> myImport('views/tencentCloud/index')
  124 + }
120 ]; 125 ];
121 126
122 // hash模式： createWebHashHistory 127 // hash模式： createWebHashHistory
  1 +<div>
  2 + <div id="content">
  3 + <div class="overview">
  4 + <div class="overview-item" v-for="(item,index) in overviewList" :key="index">
  5 + <div class="overview-item-dialog">
  6 + <header>{{ item.title }}</header>
  7 + <div class="overview-item-host">
  8 + <div class="host-img">
  9 + <img src="../../../public/shui.png" alt="">
  10 + <span>{{item.host.name}}</span>
  11 + </div>
  12 + <div class="host-num">
  13 + <div class="host-num-item">
  14 + <span class="host-num-item-value count">
  15 + <span>{{item.host.total}}</span>
  16 + <span style="font-size: 16px;margin-left: 5px;">台</span>
  17 + </span>
  18 + <span>总量</span>
  19 + </div>
  20 + <div class="host-num-item">
  21 + <span class="host-num-item-value success">{{item.host.success}}</span>
  22 + <span>正常</span>
  23 + </div>
  24 + <div class="host-num-item">
  25 + <span class="host-num-item-value error">{{item.host.error}}</span>
  26 + <span>异常</span>
  27 + </div>
  28 + <div class="host-num-item">
  29 + <span class="host-num-item-value waring">{{item.host.stop}}</span>
  30 + <span>暂停</span>
  31 + </div>
  32 + <div class="host-num-item">
  33 + <span class="host-num-item-value waring">{{item.host.operating}}</span>
  34 + <span>操作中</span>
  35 + </div>
  36 + <div class="host-num-item"></div>
  37 + </div>
  38 + </div>
  39 + <div class="overview-item-virtualMachine">
  40 + <div class="virtualMachine-img">
  41 + <img src="../../../public/shui.png" alt="">
  42 + <span>{{item.virtualMachine.name}}</span>
  43 + </div>
  44 + <div class="virtualMachine-num">
  45 + <div class="virtualMachine-num-item">
  46 + <span class="virtualMachine-num-item-value count">
  47 + <span>{{item.virtualMachine.total}}</span>
  48 + <span style="font-size: 16px;margin-left: 5px;">台</span>
  49 + </span>
  50 + <span>总量</span>
  51 + </div>
  52 + <div class="virtualMachine-num-item">
  53 + <span class="virtualMachine-num-item-value success">{{item.virtualMachine.success}}</span>
  54 + <span>正常</span>
  55 + </div>
  56 + <div class="virtualMachine-num-item">
  57 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.operating}}</span>
  58 + <span>操作中</span>
  59 + </div>
  60 + <div class="virtualMachine-num-item">
  61 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.shutdown}}</span>
  62 + <span>已关机</span>
  63 + </div>
  64 + <div class="virtualMachine-num-item">
  65 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.recovery}}</span>
  66 + <span>待回收</span>
  67 + </div>
  68 + <div class="virtualMachine-num-item">
  69 + <span class="virtualMachine-num-item-value error">{{item.virtualMachine.waring}}</span>
  70 + <span>异常</span>
  71 + </div>
  72 + </div>
  73 + </div>
  74 + </div>
  75 + <div class="overview-item-box">
  76 + <header>{{item.res.title}}</header>
  77 + <div class="res-ratio">
  78 + <div>CPU</div>
  79 + <div class="progress">
  80 + <div :style="{width:item.res.storage.count?(item.res.cpu.use / item.res.cpu.count)*100+'%':'0%'}" class="progress-bar">{{item.res.storage.count?(item.res.cpu.use / item.res.cpu.count)*100+'%':''}}</div>
  81 + </div>
  82 + <div>已使用：{{item.res.cpu.use}}核/总量：{{item.res.cpu.count}}核</div>
  83 + </div>
  84 + <div class="res-ratio">
  85 + <div>内存</div>
  86 + <div class="progress">
  87 + <div :style="{width:item.res.storage.count?(item.res.storage.use / item.res.storage.count)*100+'%':'0%'}" class="progress-bar">{{item.res.storage.count?(item.res.storage.use / item.res.storage.count)*100+'%':''}}</div>
  88 + </div>
  89 + <div>已使用：{{item.res.storage.use}}G/总量：{{item.res.storage.count}}G</div>
  90 + </div>
  91 + <div class="res-ratio">
  92 + <div>磁盘</div>
  93 + <div class="progress">
  94 + <div :style="{width:item.res.disk.count?(item.res.disk.use / item.res.disk.count)*100+'%':'0%'}" class="progress-bar">{{item.res.disk.count?(item.res.disk.use / item.res.disk.count)*100+'%':''}}</div>
  95 + </div>
  96 + <div>已使用：{{item.res.disk.use}}G/总量：{{item.res.disk.count}}G</div>
  97 + </div>
  98 + </div>
  99 + </div>
  100 + </div>
  101 + </div>
  102 + <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
  103 + :height="height - 365"
  104 + :loading="false"
  105 + :pageSize="queryParams.pageSize"
  106 + :showBorder="true"
  107 + :showIndex="true"
  108 + :showPage="true"
  109 + :showSelection="false"
  110 + :showTools="true"
  111 + :total="queryParams.count"
  112 + @loaddata="loaddata">
  113 + <template #default="{row,prop,column}">
  114 +
  115 + </template>
  116 + <template #tools="{scope}">
  117 + <div class="list-handle">
  118 + <span class="icon-bg" @click="handleDetail(scope.row)">
  119 + <i class="el-icon-document" title="详情"></i>
  120 + </span>
  121 + </div>
  122 + </template>
  123 + </cm-table-page>
  124 +</div>
  1 +export default {
  2 + name:"tencentCloud",
  3 + setup(props,{attrs,slots,emit}){
  4 + const {proxy} = Vue.getCurrentInstance();
  5 + let height = Vue.ref(window.innerHeight);
  6 + let overviewList=Vue.ref([
  7 + {
  8 + title:"CVM(overlay)资源实例概览",
  9 + host:{
  10 + name:"overlay宿主机",
  11 + total:68,
  12 + success:68,
  13 + error:0,
  14 + stop:0,
  15 + operating:0,
  16 + },
  17 + virtualMachine:{
  18 + name:"overlay虚拟机",
  19 + total:734,
  20 + success:734,
  21 + operating:0,
  22 + shutdown:2,
  23 + recovery:0,
  24 + waring:0
  25 + },
  26 + res:{
  27 + title:"overlay资源(核)",
  28 + cpu:{
  29 + use:7300,
  30 + count:8704,
  31 + ratio:0,
  32 + },
  33 + storage:{
  34 + use:2690,
  35 + count:31280,
  36 + ratio:0,
  37 + },
  38 + disk:{
  39 + use:0,
  40 + count:0,
  41 + ratio:0,
  42 + }
  43 + }
  44 + },
  45 + {
  46 + title:"CVM(underlay)资源实例概览",
  47 + host:{
  48 + name:"underlay宿主机",
  49 + total:68,
  50 + success:68,
  51 + error:0,
  52 + stop:0,
  53 + operating:0,
  54 + },
  55 + virtualMachine:{
  56 + name:"underlay虚拟机",
  57 + total:734,
  58 + success:734,
  59 + operating:0,
  60 + shutdown:2,
  61 + recovery:0,
  62 + waring:0
  63 + },
  64 + res:{
  65 + title:"underlay资源(核)",
  66 + cpu:{
  67 + use:7300,
  68 + count:8704,
  69 + ratio:0,
  70 + },
  71 + storage:{
  72 + use:2690,
  73 + count:31280,
  74 + ratio:0,
  75 + },
  76 + disk:{
  77 + use:105676,
  78 + count:160440,
  79 + ratio:0,
  80 + }
  81 + }
  82 + }
  83 + ])
  84 +
  85 + //表格字段
  86 + let tableData = Vue.ref({
  87 + dataList: [],
  88 + columns: [
  89 + {
  90 + prop: 'resTypeName',
  91 + label: '可用区',
  92 + sortable: true,
  93 + align: 'center',
  94 + width: '200',
  95 + },
  96 + {
  97 + prop: 'resName',
  98 + label: '售卖池',
  99 + sortable: true,
  100 + align: 'center'
  101 + },
  102 + {
  103 + prop: 'ip',
  104 + label: '实例类型',
  105 + sortable: true,
  106 + align: 'center',
  107 + width: '130'
  108 + }, {
  109 + prop: 'admin',
  110 + label: '网络类型',
  111 + sortable: true,
  112 + align: 'center',
  113 + width: '130'
  114 + }, {
  115 + prop: 'busTypeName',
  116 + label: 'CPU(已用/总量)',
  117 + sortable: true,
  118 + align: 'center',
  119 + width: '270'
  120 + },
  121 + {
  122 + prop: 'nickname',
  123 + label: '剩余CPU(核)',
  124 + sortable: true,
  125 + align: 'center',
  126 + width: '150'
  127 + },
  128 + {
  129 + prop: 'createUser',
  130 + label: '内存(已用/总量)',
  131 + sortable: true,
  132 + align: 'center',
  133 + width: '130'
  134 + },
  135 + {
  136 + prop: 'createTime',
  137 + label: '剩余内存(G)',
  138 + sortable: true,
  139 + align: 'center',
  140 + width: '170'
  141 + },{
  142 + prop: 'createTime',
  143 + label: '磁盘(已用/总量)',
  144 + sortable: true,
  145 + align: 'center',
  146 + width: '170'
  147 + },
  148 + ]
  149 + })
  150 +
  151 +
  152 + let dict = {
  153 + total:"KPI43C8CCFC",
  154 + success:"KPI95E996B3",
  155 + error:"KPI597F8EA4",
  156 + stop:"KPIC1A8B053",
  157 + operating:"KPIBD0389BD",
  158 + shutdown:"KPI7FCD9C30",
  159 + recovery:"KPI7FCD9C30",
  160 + waring:"KPICA7BF228",
  161 + }
  162 +
  163 + let dictCpu = {
  164 + use:"",
  165 + count:"",
  166 + ratio:"",
  167 + }
  168 + let dictMem = {
  169 + use:"",
  170 + count:"",
  171 + ratio:"",
  172 + }
  173 + let dictDisk = {
  174 + use:"",
  175 + count:"",
  176 + ratio:"",
  177 + }
  178 +
  179 + // 获取列表
  180 + let getDataList = () => {
  181 + // 资源实例概览
  182 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  183 + resId:"66c74f6cdc044baca787af8f5fc35840",
  184 + flag:"overlay-physic-",
  185 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  186 + },(res)=>{
  187 + for (let i in dict){
  188 + overviewList.data[0].host[i] = res.data[dict[i]];
  189 + }
  190 + },(err)=>{
  191 + console.log(err);
  192 + })
  193 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  194 + resId:"66c74f6cdc044baca787af8f5fc35840",
  195 + flag:"overlay-virtual-",
  196 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  197 + },(res)=>{
  198 + for (let i in dict){
  199 + overviewList.data[0].virtualMachine[i] = res.data[dict[i]];
  200 + }
  201 + },(err)=>{
  202 + console.log(err);
  203 + })
  204 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  205 + resId:"66c74f6cdc044baca787af8f5fc35840",
  206 + flag:"under-physic-",
  207 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  208 + },(res)=>{
  209 + for (let i in dict){
  210 + overviewList.data[1].host[i] = res.data[dict[i]];
  211 + }
  212 + },(err)=>{
  213 + console.log(err);
  214 + })
  215 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  216 + resId:"66c74f6cdc044baca787af8f5fc35840",
  217 + flag:"under-virtual-",
  218 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  219 + },(res)=>{
  220 + for (let i in dict){
  221 + overviewList.data[1].virtualMachine[i] = res.data[dict[i]];
  222 + }
  223 + },(err)=>{
  224 + console.log(err);
  225 + })
  226 +
  227 + // 资源使用率
  228 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  229 + resId:"66c74f6cdc044baca787af8f5fc35840",
  230 + flag:"overlay-cpu",
  231 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  232 + },(res)=>{
  233 + for (let i in dictCpu){
  234 + overviewList.data[0].res[i] = res.data[dictCpu[i]];
  235 + }
  236 + },(err)=>{
  237 + console.log(err);
  238 + })
  239 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  240 + resId:"66c74f6cdc044baca787af8f5fc35840",
  241 + flag:"overlay-mem",
  242 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  243 + },(res)=>{
  244 + for (let i in dictMem){
  245 + overviewList.data[0].res[i] = res.data[dictMem[i]];
  246 + }
  247 + },(err)=>{
  248 + console.log(err);
  249 + })
  250 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  251 + resId:"66c74f6cdc044baca787af8f5fc35840",
  252 + flag:"overlay-disk",
  253 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  254 + },(res)=>{
  255 + for (let i in dictDisk){
  256 + overviewList.data[0].res[i] = res.data[dictDisk[i]];
  257 + }
  258 + },(err)=>{
  259 + console.log(err);
  260 + })
  261 +
  262 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  263 + resId:"66c74f6cdc044baca787af8f5fc35840",
  264 + flag:"under-cpu",
  265 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  266 + },(res)=>{
  267 + for (let i in dictCpu){
  268 + overviewList.data[1].res[i] = res.data[dictCpu[i]];
  269 + }
  270 + },(err)=>{
  271 + console.log(err);
  272 + })
  273 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  274 + resId:"66c74f6cdc044baca787af8f5fc35840",
  275 + flag:"under-mem",
  276 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  277 + },(res)=>{
  278 + for (let i in dictMem){
  279 + overviewList.data[1].res[i] = res.data[dictMem[i]];
  280 + }
  281 + },(err)=>{
  282 + console.log(err);
  283 + })
  284 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  285 + resId:"66c74f6cdc044baca787af8f5fc35840",
  286 + flag:"under-disk",
  287 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  288 + },(res)=>{
  289 + for (let i in dictDisk){
  290 + overviewList.data[1].res[i] = res.data[dictDisk[i]];
  291 + }
  292 + },(err)=>{
  293 + console.log(err);
  294 + })
  295 +
  296 + // 表格
  297 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  298 + resId:"66c74f6cdc044baca787af8f5fc35840",
  299 + flag:"tencent-capacity",
  300 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  301 + },(res)=>{
  302 +
  303 + },(err)=>{
  304 + console.log(err);
  305 + })
  306 + };
  307 +
  308 + return {
  309 + height,
  310 + tableData,
  311 + overviewList,
  312 + }
  313 + }
  314 +}