monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by zhangtianqi
Commit dc43af555dc1b91788ef6ead826cc83a597e9da7 1 parent 6a56c5db

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

Inline Side-by-side
Showing 10 changed files with 495 additions and 1 deletions
@@ -3,6 +3,14 @@ @@ -3,6 +3,14 @@
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-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  7 + <ul class="layui-tab-title">
  8 + <li class="layui-this">CVM(overlay)资源</li>
  9 + <li>云硬盘资源</li>
  10 + <li>TDSQL-Mysql资源</li>
  11 + </ul>
  12 + <div class="layui-tab-content">
  13 + <div class="layui-tab-item layui-show">
6 <div class="layui-card-body"> 14 <div class="layui-card-body">
7 <div class="lay-row" style="height: 748px;"> 15 <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 <iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 748px!important;border: none!important;"/>
@@ -21,6 +29,24 @@ @@ -21,6 +29,24 @@
21 </div> 29 </div>
22 </div> 30 </div>
23 </div> 31 </div>
  32 + <div class="layui-tab-item">
  33 + <div class="layui-card-body">
  34 + <div class="lay-row" style="height: 748px;">
  35 + <iframe src="/vue3/index.html#/vue3/tencentCloudHardDrive" class="layadmin-iframe" style="height: 100%;border: none!important;"/>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + <div class="layui-tab-item">
  40 + <div class="layui-card-body">
  41 + <div class="lay-row" style="height: 748px;">
  42 + <iframe src="/vue3/index.html#/vue3/tencentCloudTDSQL" class="layadmin-iframe" style="height: 100%;border: none!important;"/>
  43 + </div>
  44 + </div>
  45 + </div>
  46 + </div>
  47 + </div>
  48 +
  49 + </div>
24 </div> 50 </div>
25 </div> 51 </div>
26 </article> 52 </article>
@@ -127,3 +127,132 @@ @@ -127,3 +127,132 @@
127 .progress-bar>span{ 127 .progress-bar>span{
128 margin-right: 10px; 128 margin-right: 10px;
129 } 129 }
  130 +
  131 +
  132 +.tencent-cloud-box{
  133 + background: white;
  134 + box-sizing: border-box;
  135 + padding: 0px 15px;
  136 + margin-bottom: 5px;
  137 +}
  138 +.tencent-cloud-box .title{
  139 + font-size: 18px;
  140 + font-weight: bolder;
  141 + padding: 15px 0;
  142 + border-bottom: 1px solid #F0F0F4;
  143 +}
  144 +.hard-drive-items {
  145 + display: flex;
  146 + align-items: center;
  147 +}
  148 +.hard-drive-items .hard-drive-item{
  149 + padding: 15px 10px;
  150 + width: 200px;
  151 + box-sizing: border-box;
  152 + margin: 10px 0;
  153 + margin-right: 15px;
  154 + border-radius: 15px;
  155 + background: linear-gradient(181deg, #EAF1FF, #FFFFFF);
  156 +}
  157 +.hard-drive-items .hard-drive-item .hard-drive-header{
  158 + display: flex;
  159 + align-items: center;
  160 + justify-content: space-between;
  161 + margin-bottom: 10px;
  162 +}
  163 +.hard-drive-items .hard-drive-item .hard-drive-header img{
  164 + width: 30px;
  165 + height: 30px;
  166 + margin-left: 10px;
  167 + margin-right: 30px;
  168 +}
  169 +.hard-drive-items .hard-drive-item .hard-drive-header .hard-drive-value{
  170 + font-size: 18px;
  171 + font-weight: bolder;
  172 +}
  173 +.hard-drive-items .hard-drive-item .hard-drive-header .hard-drive-unit{
  174 + font-size: 12px;
  175 +}
  176 +.hard-drive-items .hard-drive-item .hard-drive-footer{
  177 + font-size: 14px;
  178 +}
  179 +.subtitle{
  180 + margin-top: 10px;
  181 + font-weight: bolder;
  182 +}
  183 +.td-sql-items{
  184 + margin-top: 10px;
  185 + border: 1px solid #A6D2FF;
  186 + background: #F2F9FF;
  187 + padding: 10px 20px;
  188 + display: inline-block;
  189 + border-radius: 4px;
  190 +}
  191 +.td-sql-items .subtitle{
  192 + margin: 0;
  193 +}
  194 +.td-sql-item{
  195 + margin-top: 10px;
  196 + display: flex;
  197 + align-items: center;
  198 +}
  199 +.td-sql-item .td-sql-value{
  200 + font-size: 18px;
  201 + font-weight: bolder;
  202 +}
  203 +.td-sql-item .td-sql-unit{
  204 + font-size: 12px;
  205 +}
  206 +.td-sql-item .td-sql-footer{
  207 + font-size: 14px;
  208 +}
  209 +.td-sql-item>div{
  210 + text-align: center;
  211 + padding: 0 25px;
  212 +}
  213 +.td-sql-item>div:nth-of-type(1){
  214 + color: #2368F2;
  215 + padding-left: 0;
  216 +}
  217 +.td-sql-item>div:nth-of-type(2){
  218 + border-left: 1px solid #E5E6EA;
  219 + border-right: 1px solid #E5E6EA;
  220 +}
  221 +.td-sql-item>div:nth-of-type(3){
  222 + padding-right: 0;
  223 +}
  224 +.td-sql-ratio-box{
  225 + display: flex;
  226 + align-items: center;
  227 + justify-content: space-between;
  228 +}
  229 +.td-sql-ratio-box .res-ratio{
  230 + width: calc(100% / 3);
  231 +}
  232 +.td-sql-ratio-box .res-ratio .progress{
  233 + width: 45%;
  234 +}
  235 +
  236 +
  237 +
  238 +
  239 +
  240 +
  241 +
  242 +
  243 +
  244 +
  245 +
  246 +
  247 +
  248 +
  249 +
  250 +
  251 +
  252 +
  253 +
  254 +
  255 +
  256 +
  257 +
  258 +
@@ -200,9 +200,17 @@ const routes = [{ @@ -200,9 +200,17 @@ const routes = [{
200 component: () => myImport('views/license/index') 200 component: () => myImport('views/license/index')
201 }, 201 },
202 { 202 {
203 - path: '/vue3/tencentCloud', 203 + path: '/vue3/tencentCloud', // 腾讯云--CVM(overlay)资源
204 name: 'tencentCloud', 204 name: 'tencentCloud',
205 component: ()=> myImport('views/tencentCloud/index') 205 component: ()=> myImport('views/tencentCloud/index')
  206 + },{
  207 + path: '/vue3/tencentCloudHardDrive', // 腾讯云--云硬盘资源
  208 + name: 'tencentCloudHardDrive',
  209 + component: ()=> myImport('views/tencentCloud/tencentCloudHardDrive')
  210 + },{
  211 + path: '/vue3/tencentCloudTDSQL', // 腾讯云--TDSQL-Msql资源
  212 + name: 'tencentCloudTDSQL',
  213 + component: ()=> myImport('views/tencentCloud/tencentCloudTDSQL')
206 } 214 }
207 ]; 215 ];
208 216
  1 +<div :style="" class="">
  2 + <div class="cm-card" style="background: #f1f4fb;text-align: left;">
  3 + <div class="tencent-cloud-box">
  4 + <div class="title">金税信创业务专网</div>
  5 + <div class="hard-drive-items">
  6 + <div class="hard-drive-item">
  7 + <div class="hard-drive-header">
  8 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-snapshot.png" alt="">
  9 + <div>
  10 + <span class="hard-drive-value">{{cloudList[0].map[cloudList[0].kpiIds].kpiValue}}</span>
  11 + <span class="hard-drive-unit">{{cloudList[0].map[cloudList[0].kpiIds].kpiUnit}}</span>
  12 + </div>
  13 + </div>
  14 + <div class="hard-drive-footer">{{cloudList[0].map[cloudList[0].kpiIds].kpiName}}</div>
  15 + </div>
  16 + <div class="hard-drive-item">
  17 + <div class="hard-drive-header">
  18 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-snapshot-total.png" alt="">
  19 + <div>
  20 + <span class="hard-drive-value">{{cloudList[1].map[cloudList[1].kpiIds].kpiValue}}</span>
  21 + <span class="hard-drive-unit">{{cloudList[1].map[cloudList[1].kpiIds].kpiUnit}}</span>
  22 + </div>
  23 + </div>
  24 + <div class="hard-drive-footer">{{cloudList[1].map[cloudList[1].kpiIds].kpiName}}</div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 + <div class="tencent-cloud-box">
  29 + <div class="title">金税信创业务专网一区</div>
  30 + <div class="subtitle">实例概览</div>
  31 + <div class="hard-drive-items">
  32 + <div class="hard-drive-item">
  33 + <div class="hard-drive-header">
  34 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-hard-drive.png" alt="">
  35 + <div>
  36 + <span class="hard-drive-value">{{cloudList[2].map[cloudList[2].kpiIds].kpiValue}}</span>
  37 + <span class="hard-drive-unit">{{cloudList[2].map[cloudList[2].kpiIds].kpiUnit}}</span>
  38 + </div>
  39 + </div>
  40 + <div class="hard-drive-footer">{{cloudList[2].map[cloudList[2].kpiIds].kpiName}}</div>
  41 + </div>
  42 + <div class="hard-drive-item">
  43 + <div class="hard-drive-header">
  44 + <img src="/vue3/src/assets/images/machineRoom/tencent-cloud-hard-drive.png" alt="">
  45 + <div>
  46 + <span class="hard-drive-value">{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}</span>
  47 + <span class="hard-drive-unit">{{cloudList[3].map[cloudList[3].kpiIds].kpiUnit}}</span>
  48 + </div>
  49 + </div>
  50 + <div class="hard-drive-footer">{{cloudList[3].map[cloudList[3].kpiIds].kpiName}}</div>
  51 + </div>
  52 + </div>
  53 + </div>
  54 + <div class="tencent-cloud-box">
  55 + <div class="title">高性能云硬盘(G)</div>
  56 + <div class="res-ratio">
  57 + <div>使用容量</div>
  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>
  60 + </div>
  61 + <div>已使用：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}/总量：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}</div>
  62 + </div>
  63 + <div class="res-ratio">
  64 + <div>售卖容量</div>
  65 + <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>
  67 + </div>
  68 + <div>已使用：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}/总量：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}</div>
  69 + </div>
  70 + </div>
  71 + </div>
  72 +</div>
  1 +export default {
  2 + name:"tencentCloudHardDrive",
  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 +
  12 + let cloudList = Vue.ref();
  13 + cloudList.value = [
  14 + {
  15 + // 快照数量
  16 + flag: 'capacity-disk-snapshotCount',
  17 + kpiIds:'KPI2AABE086',
  18 + name:'快照数量',
  19 + },{
  20 + // 快照已使用容量
  21 + flag: 'capacity-disk-snapshotSize',
  22 + kpiIds:'KPIF1297210',
  23 + name:'快照已使用容量',
  24 + },{
  25 + // 云硬盘总数
  26 + flag: 'capacity-disk-count',
  27 + kpiIds:'KPI4F8DDF84',
  28 + name:"云硬盘总数",
  29 + },{
  30 + // 高效云硬盘数
  31 + flag: 'capacity-disk-totalDiskCount',
  32 + kpiIds:'KPI16AC2C58',
  33 + name:'高效云硬盘数',
  34 + },{
  35 + // 使用容量 已使用
  36 + flag: 'capacity-disk-used',
  37 + kpiIds:'KPI1988842F',
  38 + name:'使用容量 (已使用)',
  39 + },{
  40 + // 使用容量 总量
  41 + flag: 'capacity-disk-used',
  42 + kpiIds:'KPIBA50E567',
  43 + name: '使用容量 (总量)',
  44 + },{
  45 + // 售卖容量 已用
  46 + flag: 'capacity-disk-sale',
  47 + kpiIds:'KPI1988842F',
  48 + name: '售卖容量 (已用)',
  49 + },{
  50 + // 售卖容量 总量
  51 + flag: 'capacity-disk-sale',
  52 + kpiIds:'KPIBA50E567',
  53 + name: '售卖容量 (总量)',
  54 + }
  55 + ]
  56 +
  57 + 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)=>{
  72 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  73 + resId:resId,
  74 + flag:item.flag,
  75 + kpiIds:item.kpiIds,
  76 + },(res)=>{
  77 + if (Object.keys(res.map).length){
  78 + item.map = res.map;
  79 + }else {
  80 + item.map = {};
  81 + }
  82 + },(err)=>{
  83 + console.log(err);
  84 + })
  85 + })
  86 + }
  87 + getList();
  88 +
  89 +
  90 + return {
  91 + height,
  92 + cloudList,
  93 + }
  94 + }
  95 +}
  1 +<div :style="" class="">
  2 + <div :style=""
  3 + class="cm-card" style="background: #f1f4fb;text-align: left;">
  4 + <div class="tencent-cloud-box">
  5 + <div class="title">金税信创业务专网</div>
  6 + <div class="td-sql-items">
  7 + <div class="subtitle">TDSQL资源实例概览</div>
  8 + <div class="td-sql-item">
  9 + <div>
  10 + <div>
  11 + <span class="td-sql-value">{{cloudList[0].map[cloudList[0].kpiIds].kpiValue}}</span>
  12 + <span class="td-sql-unit">{{cloudList[0].map[cloudList[0].kpiIds].kpiUnit}}</span>
  13 + </div>
  14 + <div class="td-sql-footer">{{cloudList[0].map[cloudList[0].kpiIds].kpiName}}</div>
  15 + </div>
  16 + <div>
  17 + <div>
  18 + <span class="td-sql-value">{{cloudList[1].map[cloudList[1].kpiIds].kpiValue}}</span>
  19 + <span class="td-sql-unit">{{cloudList[1].map[cloudList[1].kpiIds].kpiUnit}}</span>
  20 + </div>
  21 + <div class="td-sql-footer">{{cloudList[1].map[cloudList[1].kpiIds].kpiName}}</div>
  22 + </div>
  23 + <div>
  24 + <div>
  25 + <span class="td-sql-value">{{cloudList[2].map[cloudList[2].kpiIds].kpiValue}}</span>
  26 + <span class="td-sql-unit">{{cloudList[2].map[cloudList[2].kpiIds].kpiUnit}}</span>
  27 + </div>
  28 + <div class="td-sql-footer">{{cloudList[2].map[cloudList[2].kpiIds].kpiName}}</div>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + <div class="td-sql-ratio-box">
  33 + <div class="res-ratio">
  34 + <div>CPU</div>
  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>
  37 + </div>
  38 + <div>已使用：{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}/总量：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}(核)</div>
  39 + </div>
  40 + <div class="res-ratio">
  41 + <div>内存</div>
  42 + <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>
  44 + </div>
  45 + <div>已使用：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}/总量：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}(T)</div>
  46 + </div>
  47 + <div class="res-ratio">
  48 + <div>磁盘</div>
  49 + <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>
  51 + </div>
  52 + <div>已使用：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}/总量：{{cloudList[8].map[cloudList[8].kpiIds].kpiValue}}(T)</div>
  53 + </div>
  54 + </div>
  55 + </div>
  56 + </div>
  57 +</div>
  1 +export default {
  2 + name:"tencentCloudHardDrive",
  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 +
  12 + let cloudList = Vue.ref();
  13 + cloudList.value = [
  14 + {
  15 + // 实例数量
  16 + flag: 'capacity-mysql-total',
  17 + kpiIds:'KPI6D78305E',
  18 + name:'实例数量',
  19 + map:{}
  20 + },{
  21 + // Mysql/MariaDB实例
  22 + flag: 'capacity-mysql-mysql-count',
  23 + kpiIds:'KPI4149780A',
  24 + name:'Mysql/MariaDB实例',
  25 + map:{}
  26 + },{
  27 + // 分布式Mysql实例
  28 + flag: 'capacity-mysql-distributed',
  29 + kpiIds:'KPIAAF0E124',
  30 + name:"分布式Mysql实例",
  31 + map:{}
  32 + },{
  33 + // CPU使用情况 已用
  34 + flag: 'capacity-mysql-cpu-used',
  35 + kpiIds:'KPIB5848895',
  36 + name:'CPU使用情况 已用',
  37 + map:{}
  38 + },{
  39 + // CPU使用情况 总量
  40 + flag: 'capacity-mysql-cpu-total',
  41 + kpiIds:'KPI8DBA891C',
  42 + name:'CPU使用情况 总量',
  43 + map:{}
  44 + },{
  45 + // 内存使用情况 已用
  46 + flag: 'capacity-mysql-mem-used',
  47 + kpiIds:'KPI4A216352',
  48 + name: '内存使用情况 已用',
  49 + map:{}
  50 + },{
  51 + // 内存使用情况 总量
  52 + flag: 'capacity-mysql-mem-total',
  53 + kpiIds:'KPI1DA60197',
  54 + name: '内存使用情况 总量',
  55 + map:{}
  56 + },{
  57 + // 磁盘使用情况 已用
  58 + flag: 'capacity-mysql-disk-used',
  59 + kpiIds:'KPI1988842F',
  60 + name: '磁盘使用情况 已用',
  61 + map:{}
  62 + },{
  63 + //磁盘使用情况 总量
  64 + flag: 'capacity-mysql-disk-total',
  65 + kpiIds:'KPIBA50E567',
  66 + name: '磁盘使用情况 总量',
  67 + map:{}
  68 + }
  69 + ]
  70 +
  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)=>{
  86 + proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
  87 + resId:resId,
  88 + flag:item.flag,
  89 + kpiIds:item.kpiIds,
  90 + },(res)=>{
  91 + if (Object.keys(res.map).length){
  92 + item.map = res.map;
  93 + }
  94 + },(err)=>{
  95 + console.log(err);
  96 + })
  97 + })
  98 + }
  99 + getList();
  100 +
  101 +
  102 + return {
  103 + height,
  104 + cloudList
  105 + }
  106 + }
  107 +}