monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit 66d28c03d6677c86b4304ea8e8a8ad945f9a1fdd 1 parent 0c365cc8

浙江 腾讯云详情页

Inline Side-by-side
Showing 13 changed files with 653 additions and 157 deletions
@@ -11,12 +11,14 @@ layui.define(['commonDetail','common'], function (exports) { @@ -11,12 +11,14 @@ layui.define(['commonDetail','common'], function (exports) {
11 }else{ 11 }else{
12 resId = data.resId; 12 resId = data.resId;
13 } 13 }
  14 + localStorage.setItem('resId',resId);
  15 +
14 commonDetail.bindTips(); 16 commonDetail.bindTips();
15 17
16 //基本信息指标 18 //基本信息指标
17 var baseKpi = "KPIE13DD9A3,KPIF74D9D2B"; 19 var baseKpi = "KPIE13DD9A3,KPIF74D9D2B";
18 //配额信息指标 20 //配额信息指标
19 - var settingKpi = "KPI765DC686,KPI082FF572,KPIACD20183,KPI3882E0B7,KPI70B7AF1D"; 21 + var settingKpi = "KPI2BB31EE0,KPI38E2673F,KPI576DDB1D,KPI3793A3FE,KPI8DBA891C,KPIB5848895,KPI1DA60197,KPI19A7770E,KPI4A216352,KPI9311A2A3,KPI29D42042,KPI1988842F,KPI50331084";
20 22
21 reload(); 23 reload();
22 24
@@ -26,8 +28,8 @@ layui.define(['commonDetail','common'], function (exports) { @@ -26,8 +28,8 @@ layui.define(['commonDetail','common'], function (exports) {
26 commonDetail.renderResHealth("tencent_cloud_plat_health_state", resId); 28 commonDetail.renderResHealth("tencent_cloud_plat_health_state", resId);
27 //基本信息 29 //基本信息
28 commonDetail.renderText("tencent_cloud_plat_baseinfo",resId,baseKpi); 30 commonDetail.renderText("tencent_cloud_plat_baseinfo",resId,baseKpi);
29 - //配额信息  
30 - commonDetail.renderTable("tencent_cloud_plat_setting",false,resId,settingKpi,"配额信息","tencent_bill_"); 31 + //售卖信息
  32 + commonDetail.renderTable("tencent_cloud_plat_sales",false,resId,settingKpi,"售卖信息","tencent-capacity");
31 //活动告警 33 //活动告警
32 commonDetail.renderActiveAlarms("tencent_cloud_plat_active_alarm",resId); 34 commonDetail.renderActiveAlarms("tencent_cloud_plat_active_alarm",resId);
33 } 35 }
  1 +//tencent_cloud_plat(腾讯云)详情页js
  2 +layui.define(['commonDetail','common'], function (exports) {
  3 + var commonDetail = layui.commonDetail;
  4 + var common = layui.common;
  5 + //对外暴露的接口
  6 + exports('tencent_cloud_plat', function (data) {
  7 + var resId = '';
  8 + var showFlag = common.getUrlParam("show");
  9 + if(showFlag && showFlag == '0'){
  10 + resId = common.getUrlParam("resId");
  11 + }else{
  12 + resId = data.resId;
  13 + }
  14 + commonDetail.bindTips();
  15 +
  16 + //基本信息指标
  17 + var baseKpi = "KPIE13DD9A3,KPIF74D9D2B";
  18 + //配额信息指标
  19 + var settingKpi = "KPI765DC686,KPI082FF572,KPIACD20183,KPI3882E0B7,KPI70B7AF1D";
  20 +
  21 + reload();
  22 +
  23 + //渲染页面
  24 + function reload() {
  25 + //资源状态
  26 + commonDetail.renderResHealth("tencent_cloud_plat_health_state", resId);
  27 + //基本信息
  28 + commonDetail.renderText("tencent_cloud_plat_baseinfo",resId,baseKpi);
  29 + //配额信息
  30 + commonDetail.renderTable("tencent_cloud_plat_setting",false,resId,settingKpi,"配额信息","tencent_bill_");
  31 + //活动告警
  32 + commonDetail.renderActiveAlarms("tencent_cloud_plat_active_alarm",resId);
  33 + }
  34 +
  35 + //定时任务
  36 + var timer = setInterval(function () {
  37 + reload()
  38 + },commonDetail.timerTime);
  39 + commonDetail.detailTimer.push(timer);
  40 +
  41 + });
  42 +});
1 -<!--tencent_cloud_plat详细页面--> 1 +
2 <article class="page-container template template_redis"> 2 <article class="page-container template template_redis">
3 <div class="page-panel"> 3 <div class="page-panel">
4 <div class="main"> 4 <div class="main">
5 <div class="layui-card"> 5 <div class="layui-card">
6 <div class="layui-card-body"> 6 <div class="layui-card-body">
7 - <div class="lay-row">  
8 - <div class="lay-row-item lay-row-item--big">  
9 - <h5 class="lay-row-title">基本信息<i data-id="tencent_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>  
10 - <ul class="info-table" id="tencent_cloud_plat_baseinfo"></ul>  
11 - </div>  
12 - <div class="lay-row-item lay-row-item--small">  
13 - <h5 class="lay-row-title">资源状态</h5>  
14 - <div class="res-state" id="tencent_cloud_plat_health_state"></div>  
15 - </div> 7 + <div class="lay-row" style="height: 748px;">
  8 + <iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 748px!important;border: none!important;"/>
16 </div> 9 </div>
17 <div class="lay-row"> 10 <div class="lay-row">
18 <div class="lay-row-item"> 11 <div class="lay-row-item">
19 - <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>  
20 - <div id="tencent_cloud_plat_setting"></div> 12 + <h5 class="lay-row-title">售卖情况<span id="tencent_cloud_plat_salesDownload" class="layui-table-link" style="margin-left: 10px;">下载</span><span id="tencent_cloud_plat_salesMore" class="layui-table-link">更多</span></h5>
  13 + <div id="tencent_cloud_plat_sales"></div>
21 </div> 14 </div>
22 </div> 15 </div>
23 <div class="lay-row"> 16 <div class="lay-row">
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> 1 +<!--tencent_cloud_plat_cluster详细页面-->
130 <article class="page-container template template_redis"> 2 <article class="page-container template template_redis">
131 - <iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 99.5%!important;"/>  
132 -</article>  
  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>
  73 +</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>
@@ -99,7 +99,7 @@ @@ -99,7 +99,7 @@
99 </div> 99 </div>
100 </div> 100 </div>
101 </div> 101 </div>
102 - <cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" 102 + <!--<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
103 :height="height - 365" 103 :height="height - 365"
104 :loading="false" 104 :loading="false"
105 :pageSize="queryParams.pageSize" 105 :pageSize="queryParams.pageSize"
@@ -120,5 +120,5 @@ @@ -120,5 +120,5 @@
120 </span> 120 </span>
121 </div> 121 </div>
122 </template> 122 </template>
123 - </cm-table-page> 123 + </cm-table-page>-->
124 </div> 124 </div>
@@ -161,19 +161,19 @@ export default { @@ -161,19 +161,19 @@ export default {
161 } 161 }
162 162
163 let dictCpu = { 163 let dictCpu = {
164 - use:"",  
165 - count:"",  
166 - ratio:"", 164 + use:"KPIB5848895",
  165 + count:"KPI8DBA891C",
  166 + ratio:"KPIC5BEEC49",
167 } 167 }
168 let dictMem = { 168 let dictMem = {
169 - use:"",  
170 - count:"",  
171 - ratio:"", 169 + use:"KPI4A216352",
  170 + count:"KPI1DA60197",
  171 + ratio:"KPI31CB8D97",
172 } 172 }
173 let dictDisk = { 173 let dictDisk = {
174 - use:"",  
175 - count:"",  
176 - ratio:"", 174 + use:"KPI1988842F",
  175 + count:"KPI29D42042",
  176 + ratio:"KPI2C8A6D17",
177 } 177 }
178 178
179 // 获取列表 179 // 获取列表
@@ -54,3 +54,5 @@ @@ -54,3 +54,5 @@
54 /*对比分析*/ 54 /*对比分析*/
55 @import "../css/analysis.css"; 55 @import "../css/analysis.css";
56 56
  57 +@import "../css/tencentCloud.css";
  58 +
  1 +.overview{
  2 + display: flex;
  3 + justify-content: flex-start;
  4 + align-items: center;
  5 + background: #f1f4fb;
  6 + padding: 5px;
  7 +}
  8 +.overview>div.overview-item{
  9 + width: 50%;
  10 + box-sizing: border-box;
  11 +}
  12 +.overview-item:nth-of-type(1){
  13 + margin-right: 5px;
  14 +}
  15 +.overview-item-dialog{
  16 + border-radius: 4px;
  17 + background: #fff;
  18 +}
  19 +.overview-item-dialog header{
  20 + padding: 10px;
  21 + font-size: 18px;
  22 + font-weight: bold;
  23 + text-align: left;
  24 +}
  25 +.overview-item:nth-of-type(1) .overview-item-dialog header{
  26 + color: #0b50b8;
  27 + border-bottom: 2px solid #d5e5fc;
  28 + box-shadow: 2px 10px 10px 5px #e5eeff , 0px 0px 46px 5px #e5eeff inset;
  29 +}
  30 +.overview-item:nth-of-type(2) .overview-item-dialog header{
  31 + color: #0268a6;
  32 + border-bottom: 2px solid #c3e9f2;
  33 + box-shadow: 2px 10px 10px 5px #dff7fb,0px 0px 46px 5px #dff7fb inset;
  34 +}
  35 +.overview-item-host,.overview-item-virtualMachine{
  36 + display: flex;
  37 + align-items: center;
  38 + justify-content: flex-start;
  39 + padding: 40px 10px;
  40 +}
  41 +.overview-item-host{
  42 + padding-bottom: 0;
  43 +}
  44 +.overview-item-host .host-img,.overview-item-virtualMachine .virtualMachine-img{
  45 + display: flex;
  46 + flex-direction: column;
  47 + align-items: center;
  48 + padding-right: 20px;
  49 + border-right: 2px solid #d5e5fc;
  50 +}
  51 +.overview-item-host .host-img img,.overview-item-virtualMachine .virtualMachine-img img{
  52 + height: 100px;
  53 + margin-bottom: 30px;
  54 +}
  55 +.overview-item-host .host-num,
  56 +.overview-item-virtualMachine .virtualMachine-num{
  57 + padding-left: 20px;
  58 + flex: 1;
  59 + display: flex;
  60 + justify-content: flex-start;
  61 + align-items: center;
  62 +}
  63 +.overview-item-host .host-num .host-num-item,
  64 +.overview-item-virtualMachine .virtualMachine-num .virtualMachine-num-item{
  65 + display: flex;
  66 + justify-content: flex-start;
  67 + align-items: center;
  68 + flex-direction: column;
  69 + flex: 1;
  70 +}
  71 +.host-num-item-value,.virtualMachine-num-item-value{
  72 + height: 130px;
  73 + line-height: 130px;
  74 + font-size: 28px;
  75 + font-weight: bold;
  76 +}
  77 +.count{
  78 + color: #575d6d;
  79 +}
  80 +.success{
  81 + color:#24ae1b;
  82 +}
  83 +.error{
  84 + color: #d71d04;
  85 +}
  86 +.waring{
  87 + color: #ff7f02;
  88 +}
  89 +
  90 +
  91 +.overview-item-box{
  92 + margin: 5px 0;
  93 + background: #FFFFFF;
  94 + border-radius: 4px;
  95 +}
  96 +.overview-item-box header{
  97 + font-size: 18px;
  98 + font-weight: bold;
  99 + color: #555c6c;
  100 + padding: 10px;
  101 + text-align: left;
  102 + border-bottom: 2px solid #f5f7f6;
  103 +}
  104 +.res-ratio{
  105 + display: flex;
  106 + justify-content: flex-start;
  107 + align-items: center;
  108 + padding: 20px 10px;
  109 +}
  110 +.res-ratio .progress{
  111 + width: 65%;
  112 + margin: 0 10px;
  113 + background-color: #eef7fe;
  114 + overflow: hidden;
  115 + height: 30px;
  116 + border-radius: 30px;
  117 +}
  118 +.progress-bar{
  119 + height: 30px;
  120 + line-height: 30px;
  121 + text-align: right;
  122 + border-radius: 30px;
  123 + background: #469bf5;
  124 + color: #FFFFFF;
  125 + box-sizing: border-box;
  126 +}
  127 +.progress-bar>span{
  128 + margin-right: 10px;
  129 +}
@@ -199,6 +199,11 @@ const routes = [{ @@ -199,6 +199,11 @@ const routes = [{
199 name: 'license', 199 name: 'license',
200 component: () => myImport('views/license/index') 200 component: () => myImport('views/license/index')
201 }, 201 },
  202 + {
  203 + path: '/vue3/tencentCloud',
  204 + name: 'tencentCloud',
  205 + component: ()=> myImport('views/tencentCloud/index')
  206 + }
202 ]; 207 ];
203 208
204 // hash模式： createWebHashHistory 209 // hash模式： createWebHashHistory
  1 +<div :style="" class="">
  2 + <div :style=""
  3 + class="cm-card">
  4 + <div>
  5 + <div id="content">
  6 + <div class="overview">
  7 + <div class="overview-item" v-for="(item,index) in overviewList" :key="index">
  8 + <div class="overview-item-dialog">
  9 + <header>{{ item.title }}</header>
  10 + <div class="overview-item-host">
  11 + <div class="host-img">
  12 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-host.png" alt="">
  13 + <span>{{item.host.name}}</span>
  14 + </div>
  15 + <div class="host-num">
  16 + <div class="host-num-item">
  17 + <span class="host-num-item-value count">
  18 + <span>{{item.host.total}}</span>
  19 + <span style="font-size: 16px;margin-left: 5px;">台</span>
  20 + </span>
  21 + <span>总量</span>
  22 + </div>
  23 + <div class="host-num-item">
  24 + <span class="host-num-item-value success">{{item.host.success}}</span>
  25 + <span>正常</span>
  26 + </div>
  27 + <div class="host-num-item">
  28 + <span class="host-num-item-value error">{{item.host.error}}</span>
  29 + <span>异常</span>
  30 + </div>
  31 + <div class="host-num-item">
  32 + <span class="host-num-item-value waring">{{item.host.stop}}</span>
  33 + <span>暂停</span>
  34 + </div>
  35 + <div class="host-num-item">
  36 + <span class="host-num-item-value waring">{{item.host.operating}}</span>
  37 + <span>操作中</span>
  38 + </div>
  39 + <div class="host-num-item"></div>
  40 + </div>
  41 + </div>
  42 + <div class="overview-item-virtualMachine">
  43 + <div class="virtualMachine-img">
  44 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-virtualMachine.png" alt="">
  45 + <span>{{item.virtualMachine.name}}</span>
  46 + </div>
  47 + <div class="virtualMachine-num">
  48 + <div class="virtualMachine-num-item">
  49 + <span class="virtualMachine-num-item-value count">
  50 + <span>{{item.virtualMachine.total}}</span>
  51 + <span style="font-size: 16px;margin-left: 5px;">台</span>
  52 + </span>
  53 + <span>总量</span>
  54 + </div>
  55 + <div class="virtualMachine-num-item">
  56 + <span class="virtualMachine-num-item-value success">{{item.virtualMachine.success}}</span>
  57 + <span>正常</span>
  58 + </div>
  59 + <div class="virtualMachine-num-item">
  60 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.operating}}</span>
  61 + <span>操作中</span>
  62 + </div>
  63 + <div class="virtualMachine-num-item">
  64 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.shutdown}}</span>
  65 + <span>已关机</span>
  66 + </div>
  67 + <div class="virtualMachine-num-item">
  68 + <span class="virtualMachine-num-item-value waring">{{item.virtualMachine.recovery}}</span>
  69 + <span>待回收</span>
  70 + </div>
  71 + <div class="virtualMachine-num-item">
  72 + <span class="virtualMachine-num-item-value error">{{item.virtualMachine.waring}}</span>
  73 + <span>异常</span>
  74 + </div>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + <div class="overview-item-box">
  79 + <header>{{item.res.title}}</header>
  80 + <div class="res-ratio">
  81 + <div>CPU</div>
  82 + <div class="progress">
  83 + <div :style="{width:item.res.cpu.ratio+'%'}" class="progress-bar"><span>{{item.res.cpu.ratio==0?'':item.res.cpu.ratio+'%'}}</span></div>
  84 + </div>
  85 + <div>已使用：{{item.res.cpu.use}}核/总量：{{item.res.cpu.count}}核</div>
  86 + </div>
  87 + <div class="res-ratio">
  88 + <div>内存</div>
  89 + <div class="progress">
  90 + <div :style="{width:item.res.storage.ratio+'%'}" class="progress-bar"><span>{{item.res.storage.ratio==0?'':item.res.storage.ratio+'%'}}</span></div>
  91 + </div>
  92 + <div>已使用：{{item.res.storage.use}}G/总量：{{item.res.storage.count}}G</div>
  93 + </div>
  94 + <div class="res-ratio">
  95 + <div>磁盘</div>
  96 + <div class="progress">
  97 + <div :style="{width:item.res.disk.ratio+'%'}" class="progress-bar"><span>{{item.res.disk.ratio==0?'':item.res.disk.ratio+'%'}}</span></div>
  98 + </div>
  99 + <div>已使用：{{item.res.disk.use}}G/总量：{{item.res.disk.count}}G</div>
  100 + </div>
  101 + </div>
  102 + </div>
  103 + </div>
  104 + </div>
  105 + </div>
  106 + </div>
  107 +</div>
  1 +export default {
  2 + name:"tencentCloud",
  3 + template: '',
  4 + components: {
  5 + },
  6 + props: [],
  7 + setup(props,{attrs,slots,emit}){
  8 + const {proxy} = Vue.getCurrentInstance();
  9 + const resId = localStorage.getItem('resId');
  10 + let height = Vue.ref(window.innerHeight);
  11 + let overviewList=Vue.ref([
  12 + {
  13 + title:"CVM(overlay)资源实例概览",
  14 + host:{
  15 + name:"overlay宿主机",
  16 + total:0,
  17 + success:0,
  18 + error:0,
  19 + stop:0,
  20 + operating:0,
  21 + },
  22 + virtualMachine:{
  23 + name:"overlay虚拟机",
  24 + total:0,
  25 + success:0,
  26 + operating:0,
  27 + shutdown:0,
  28 + recovery:0,
  29 + waring:0
  30 + },
  31 + res:{
  32 + title:"overlay资源(核)",
  33 + cpu:{
  34 + use:0,
  35 + count:0,
  36 + ratio:0,
  37 + },
  38 + storage:{
  39 + use:0,
  40 + count:0,
  41 + ratio:0,
  42 + },
  43 + disk:{
  44 + use:0,
  45 + count:0,
  46 + ratio:0,
  47 + }
  48 + }
  49 + },
  50 + {
  51 + title:"CVM(underlay)资源实例概览",
  52 + host:{
  53 + name:"underlay宿主机",
  54 + total:0,
  55 + success:0,
  56 + error:0,
  57 + stop:0,
  58 + operating:0,
  59 + },
  60 + virtualMachine:{
  61 + name:"underlay虚拟机",
  62 + total:0,
  63 + success:0,
  64 + operating:0,
  65 + shutdown:0,
  66 + recovery:0,
  67 + waring:0
  68 + },
  69 + res:{
  70 + title:"underlay资源(核)",
  71 + cpu:{
  72 + use:0,
  73 + count:0,
  74 + ratio:0,
  75 + },
  76 + storage:{
  77 + use:0,
  78 + count:0,
  79 + ratio:0,
  80 + },
  81 + disk:{
  82 + use:0,
  83 + count:0,
  84 + ratio:0,
  85 + }
  86 + }
  87 + }
  88 + ])
  89 +
  90 + let dict = {
  91 + total:"KPI43C8CCFC",
  92 + success:"KPI95E996B3",
  93 + error:"KPI597F8EA4",
  94 + stop:"KPIC1A8B053",
  95 + operating:"KPIBD0389BD",
  96 + shutdown:"KPI7FCD9C30",
  97 + recovery:"KPI7FCD9C30",
  98 + waring:"KPICA7BF228",
  99 + }
  100 +
  101 + let dictCpu = {
  102 + use:"KPIB5848895",
  103 + count:"KPI8DBA891C",
  104 + ratio:"KPIC5BEEC49",
  105 + }
  106 + let dictMem = {
  107 + use:"KPI4A216352",
  108 + count:"KPI1DA60197",
  109 + ratio:"KPI31CB8D97",
  110 + }
  111 + let dictDisk = {
  112 + use:"KPI1988842F",
  113 + count:"KPI29D42042",
  114 + ratio:"KPI2C8A6D17",
  115 + }
  116 +
  117 + // 获取列表
  118 + let getDataList = () => {
  119 + // 资源实例概览
  120 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  121 + resId:resId,
  122 + flag:"overlay-physic-",
  123 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  124 + },(res)=>{
  125 + if (Object.keys(res.map).length){
  126 + for (let i in dict){
  127 + overviewList.value[0].host[i] = res.map[dict[i]] || 0;
  128 + }
  129 + }
  130 + },(err)=>{
  131 + console.log(err);
  132 + })
  133 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  134 + resId:resId,
  135 + flag:"overlay-virtual-",
  136 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPIBD0389BD,KPI7FCD9C30,KPICA7BF228,KPI597F8EA4",
  137 + },(res)=>{
  138 + if (Object.keys(res.map).length){
  139 + for (let i in dict){
  140 + overviewList.value[0].virtualMachine[i] = res.map[dict[i]] || 0;
  141 + }
  142 + }
  143 + },(err)=>{
  144 + console.log(err);
  145 + })
  146 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  147 + resId:resId,
  148 + flag:"underlay-physic-",
  149 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
  150 + },(res)=>{
  151 + console.log(res.map);
  152 + if (Object.keys(res.map).length){
  153 + for (let i in dict){
  154 + overviewList.value[1].host[i] = res.map[dict[i]] || 0;
  155 + }
  156 + }
  157 + },(err)=>{
  158 + console.log(err);
  159 + })
  160 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  161 + resId:resId,
  162 + flag:"underlay-virtual-",
  163 + kpiIds:"KPI43C8CCFC,KPI95E996B3,KPIBD0389BD,KPI7FCD9C30,KPICA7BF228,KPI597F8EA4",
  164 + },(res)=>{
  165 + if (Object.keys(res.map).length){
  166 + for (let i in dict){
  167 + overviewList.value[1].virtualMachine[i] = res.map[dict[i]] || 0;
  168 + }
  169 + }
  170 + },(err)=>{
  171 + console.log(err);
  172 + })
  173 +
  174 + // 资源使用率
  175 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  176 + resId:resId,
  177 + flag:"overlay-cpu",
  178 + kpiIds:"KPI8DBA891C,KPIB5848895,KPIC5BEEC49",
  179 + },(res)=>{
  180 + if (Object.keys(res.map).length){
  181 + for (let i in dictCpu){
  182 + overviewList.value[0].res.cpu[i] = res.map[dictCpu[i]];
  183 + }
  184 + }
  185 + },(err)=>{
  186 + console.log(err);
  187 + })
  188 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  189 + resId:resId,
  190 + flag:"overlay-mem",
  191 + kpiIds:"KPI1DA60197,KPI4A216352,KPI31CB8D97",
  192 + },(res)=>{
  193 + if (Object.keys(res.map).length){
  194 + for (let i in dictMem){
  195 + overviewList.value[0].res.storage[i] = res.map[dictMem[i]];
  196 + }
  197 + }
  198 + },(err)=>{
  199 + console.log(err);
  200 + })
  201 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  202 + resId:resId,
  203 + flag:"overlay-disk",
  204 + kpiIds:"KPI29D42042,KPI1988842F,KPI2C8A6D17",
  205 + },(res)=>{
  206 + if (Object.keys(res.map).length){
  207 + for (let i in dictDisk){
  208 + overviewList.value[0].res.disk[i] = res.map[dictDisk[i]];
  209 + }
  210 + }
  211 + },(err)=>{
  212 + console.log(err);
  213 + })
  214 +
  215 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  216 + resId:resId,
  217 + flag:"underlay-cpu",
  218 + kpiIds:"KPI8DBA891C,KPIB5848895,KPIC5BEEC49",
  219 + },(res)=>{
  220 + if (Object.keys(res.map).length){
  221 + for (let i in dictCpu){
  222 + overviewList.value[1].res.cpu[i] = res.map[dictCpu[i]];
  223 + }
  224 + }
  225 + },(err)=>{
  226 + console.log(err);
  227 + })
  228 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  229 + resId:resId,
  230 + flag:"underlay-mem",
  231 + kpiIds:"KPI1DA60197,KPI4A216352,KPI31CB8D97",
  232 + },(res)=>{
  233 + if (Object.keys(res.map).length){
  234 + for (let i in dictMem){
  235 + overviewList.value[1].res.storage[i] = res.map[dictMem[i]];
  236 + }
  237 + }
  238 + },(err)=>{
  239 + console.log(err);
  240 + })
  241 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  242 + resId:resId,
  243 + flag:"underlay-disk",
  244 + kpiIds:"KPI29D42042,KPI1988842F,KPI2C8A6D17",
  245 + },(res)=>{
  246 + if (Object.keys(res.map).length){
  247 + for (let i in dictDisk){
  248 + overviewList.value[1].res.disk[i] = res.map[dictDisk[i]];
  249 + }
  250 + }
  251 + },(err)=>{
  252 + console.log(err);
  253 + })
  254 +
  255 + };
  256 + getDataList();
  257 +
  258 + return {
  259 + height,
  260 + overviewList,
  261 + }
  262 + }
  263 +}