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 @@
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">CVM(overlay)资源</li>
<li>云硬盘资源</li>
<li>TDSQL-Mysql资源</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-card-body">
<div class="lay-row" style="height: 748px;">
<iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 748px!important;border: none!important;"/>
... ... @@ -21,6 +29,24 @@
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-card-body">
<div class="lay-row" style="height: 748px;">
<iframe src="/vue3/index.html#/vue3/tencentCloudHardDrive" class="layadmin-iframe" style="height: 100%;border: none!important;"/>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-card-body">
<div class="lay-row" style="height: 748px;">
<iframe src="/vue3/index.html#/vue3/tencentCloudTDSQL" class="layadmin-iframe" style="height: 100%;border: none!important;"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
... ...
... ... @@ -127,3 +127,132 @@
.progress-bar>span{
margin-right: 10px;
}
.tencent-cloud-box{
background: white;
box-sizing: border-box;
padding: 0px 15px;
margin-bottom: 5px;
}
.tencent-cloud-box .title{
font-size: 18px;
font-weight: bolder;
padding: 15px 0;
border-bottom: 1px solid #F0F0F4;
}
.hard-drive-items {
display: flex;
align-items: center;
}
.hard-drive-items .hard-drive-item{
padding: 15px 10px;
width: 200px;
box-sizing: border-box;
margin: 10px 0;
margin-right: 15px;
border-radius: 15px;
background: linear-gradient(181deg, #EAF1FF, #FFFFFF);
}
.hard-drive-items .hard-drive-item .hard-drive-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.hard-drive-items .hard-drive-item .hard-drive-header img{
width: 30px;
height: 30px;
margin-left: 10px;
margin-right: 30px;
}
.hard-drive-items .hard-drive-item .hard-drive-header .hard-drive-value{
font-size: 18px;
font-weight: bolder;
}
.hard-drive-items .hard-drive-item .hard-drive-header .hard-drive-unit{
font-size: 12px;
}
.hard-drive-items .hard-drive-item .hard-drive-footer{
font-size: 14px;
}
.subtitle{
margin-top: 10px;
font-weight: bolder;
}
.td-sql-items{
margin-top: 10px;
border: 1px solid #A6D2FF;
background: #F2F9FF;
padding: 10px 20px;
display: inline-block;
border-radius: 4px;
}
.td-sql-items .subtitle{
margin: 0;
}
.td-sql-item{
margin-top: 10px;
display: flex;
align-items: center;
}
.td-sql-item .td-sql-value{
font-size: 18px;
font-weight: bolder;
}
.td-sql-item .td-sql-unit{
font-size: 12px;
}
.td-sql-item .td-sql-footer{
font-size: 14px;
}
.td-sql-item>div{
text-align: center;
padding: 0 25px;
}
.td-sql-item>div:nth-of-type(1){
color: #2368F2;
padding-left: 0;
}
.td-sql-item>div:nth-of-type(2){
border-left: 1px solid #E5E6EA;
border-right: 1px solid #E5E6EA;
}
.td-sql-item>div:nth-of-type(3){
padding-right: 0;
}
.td-sql-ratio-box{
display: flex;
align-items: center;
justify-content: space-between;
}
.td-sql-ratio-box .res-ratio{
width: calc(100% / 3);
}
.td-sql-ratio-box .res-ratio .progress{
width: 45%;
}
... ...
... ... @@ -200,9 +200,17 @@ const routes = [{
component: () => myImport('views/license/index')
},
{
path: '/vue3/tencentCloud',
path: '/vue3/tencentCloud', // 腾讯云--CVM(overlay)资源
name: 'tencentCloud',
component: ()=> myImport('views/tencentCloud/index')
},{
path: '/vue3/tencentCloudHardDrive', // 腾讯云--云硬盘资源
name: 'tencentCloudHardDrive',
component: ()=> myImport('views/tencentCloud/tencentCloudHardDrive')
},{
path: '/vue3/tencentCloudTDSQL', // 腾讯云--TDSQL-Msql资源
name: 'tencentCloudTDSQL',
component: ()=> myImport('views/tencentCloud/tencentCloudTDSQL')
}
];
... ...
<div :style="" class="">
<div class="cm-card" style="background: #f1f4fb;text-align: left;">
<div class="tencent-cloud-box">
<div class="title">金税信创业务专网</div>
<div class="hard-drive-items">
<div class="hard-drive-item">
<div class="hard-drive-header">
<img src="/vue3/src/assets/images/machineRoom/tencent-cloud-snapshot.png" alt="">
<div>
<span class="hard-drive-value">{{cloudList[0].map[cloudList[0].kpiIds].kpiValue}}</span>
<span class="hard-drive-unit">{{cloudList[0].map[cloudList[0].kpiIds].kpiUnit}}</span>
</div>
</div>
<div class="hard-drive-footer">{{cloudList[0].map[cloudList[0].kpiIds].kpiName}}</div>
</div>
<div class="hard-drive-item">
<div class="hard-drive-header">
<img src="/vue3/src/assets/images/machineRoom/tencent-cloud-snapshot-total.png" alt="">
<div>
<span class="hard-drive-value">{{cloudList[1].map[cloudList[1].kpiIds].kpiValue}}</span>
<span class="hard-drive-unit">{{cloudList[1].map[cloudList[1].kpiIds].kpiUnit}}</span>
</div>
</div>
<div class="hard-drive-footer">{{cloudList[1].map[cloudList[1].kpiIds].kpiName}}</div>
</div>
</div>
</div>
<div class="tencent-cloud-box">
<div class="title">金税信创业务专网一区</div>
<div class="subtitle">实例概览</div>
<div class="hard-drive-items">
<div class="hard-drive-item">
<div class="hard-drive-header">
<img src="/vue3/src/assets/images/machineRoom/tencent-cloud-hard-drive.png" alt="">
<div>
<span class="hard-drive-value">{{cloudList[2].map[cloudList[2].kpiIds].kpiValue}}</span>
<span class="hard-drive-unit">{{cloudList[2].map[cloudList[2].kpiIds].kpiUnit}}</span>
</div>
</div>
<div class="hard-drive-footer">{{cloudList[2].map[cloudList[2].kpiIds].kpiName}}</div>
</div>
<div class="hard-drive-item">
<div class="hard-drive-header">
<img src="/vue3/src/assets/images/machineRoom/tencent-cloud-hard-drive.png" alt="">
<div>
<span class="hard-drive-value">{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}</span>
<span class="hard-drive-unit">{{cloudList[3].map[cloudList[3].kpiIds].kpiUnit}}</span>
</div>
</div>
<div class="hard-drive-footer">{{cloudList[3].map[cloudList[3].kpiIds].kpiName}}</div>
</div>
</div>
</div>
<div class="tencent-cloud-box">
<div class="title">高性能云硬盘(G)</div>
<div class="res-ratio">
<div>使用容量</div>
<div class="progress">
<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>
</div>
<div>已使用：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}/总量：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}</div>
</div>
<div class="res-ratio">
<div>售卖容量</div>
<div class="progress">
<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>
</div>
<div>已使用：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}/总量：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}</div>
</div>
</div>
</div>
</div>
... ...
export default {
name:"tencentCloudHardDrive",
template: '',
components: {
},
props: [],
setup(props,{attrs,slots,emit}){
const {proxy} = Vue.getCurrentInstance();
const resId = localStorage.getItem('resId');
let height = Vue.ref(window.innerHeight);
let cloudList = Vue.ref();
cloudList.value = [
{
// 快照数量
flag: 'capacity-disk-snapshotCount',
kpiIds:'KPI2AABE086',
name:'快照数量',
},{
// 快照已使用容量
flag: 'capacity-disk-snapshotSize',
kpiIds:'KPIF1297210',
name:'快照已使用容量',
},{
// 云硬盘总数
flag: 'capacity-disk-count',
kpiIds:'KPI4F8DDF84',
name:"云硬盘总数",
},{
// 高效云硬盘数
flag: 'capacity-disk-totalDiskCount',
kpiIds:'KPI16AC2C58',
name:'高效云硬盘数',
},{
// 使用容量 已使用
flag: 'capacity-disk-used',
kpiIds:'KPI1988842F',
name:'使用容量 (已使用)',
},{
// 使用容量 总量
flag: 'capacity-disk-used',
kpiIds:'KPIBA50E567',
name: '使用容量 (总量)',
},{
// 售卖容量 已用
flag: 'capacity-disk-sale',
kpiIds:'KPI1988842F',
name: '售卖容量 (已用)',
},{
// 售卖容量 总量
flag: 'capacity-disk-sale',
kpiIds:'KPIBA50E567',
name: '售卖容量 (总量)',
}
]
let getList = ()=>{
// 快照数量
// proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
// resId:resId,
// flag:"capacity-disk-snapshotCount",
// kpiIds:"KPI2AABE086",
// },(res)=>{
// // console.log(res);
// if (Object.keys(res.map).length){
//
// }
// },(err)=>{
// console.log(err);
// })
cloudList.value.forEach((item,index)=>{
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:resId,
flag:item.flag,
kpiIds:item.kpiIds,
},(res)=>{
if (Object.keys(res.map).length){
item.map = res.map;
}else {
item.map = {};
}
},(err)=>{
console.log(err);
})
})
}
getList();
return {
height,
cloudList,
}
}
}
\ No newline at end of file
... ...
<div :style="" class="">
<div :style=""
class="cm-card" style="background: #f1f4fb;text-align: left;">
<div class="tencent-cloud-box">
<div class="title">金税信创业务专网</div>
<div class="td-sql-items">
<div class="subtitle">TDSQL资源实例概览</div>
<div class="td-sql-item">
<div>
<div>
<span class="td-sql-value">{{cloudList[0].map[cloudList[0].kpiIds].kpiValue}}</span>
<span class="td-sql-unit">{{cloudList[0].map[cloudList[0].kpiIds].kpiUnit}}</span>
</div>
<div class="td-sql-footer">{{cloudList[0].map[cloudList[0].kpiIds].kpiName}}</div>
</div>
<div>
<div>
<span class="td-sql-value">{{cloudList[1].map[cloudList[1].kpiIds].kpiValue}}</span>
<span class="td-sql-unit">{{cloudList[1].map[cloudList[1].kpiIds].kpiUnit}}</span>
</div>
<div class="td-sql-footer">{{cloudList[1].map[cloudList[1].kpiIds].kpiName}}</div>
</div>
<div>
<div>
<span class="td-sql-value">{{cloudList[2].map[cloudList[2].kpiIds].kpiValue}}</span>
<span class="td-sql-unit">{{cloudList[2].map[cloudList[2].kpiIds].kpiUnit}}</span>
</div>
<div class="td-sql-footer">{{cloudList[2].map[cloudList[2].kpiIds].kpiName}}</div>
</div>
</div>
</div>
<div class="td-sql-ratio-box">
<div class="res-ratio">
<div>CPU</div>
<div class="progress">
<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>
</div>
<div>已使用：{{cloudList[3].map[cloudList[3].kpiIds].kpiValue}}/总量：{{cloudList[4].map[cloudList[4].kpiIds].kpiValue}}(核)</div>
</div>
<div class="res-ratio">
<div>内存</div>
<div class="progress">
<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>
</div>
<div>已使用：{{cloudList[5].map[cloudList[5].kpiIds].kpiValue}}/总量：{{cloudList[6].map[cloudList[6].kpiIds].kpiValue}}(T)</div>
</div>
<div class="res-ratio">
<div>磁盘</div>
<div class="progress">
<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>
</div>
<div>已使用：{{cloudList[7].map[cloudList[7].kpiIds].kpiValue}}/总量：{{cloudList[8].map[cloudList[8].kpiIds].kpiValue}}(T)</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...
export default {
name:"tencentCloudHardDrive",
template: '',
components: {
},
props: [],
setup(props,{attrs,slots,emit}){
const {proxy} = Vue.getCurrentInstance();
const resId = localStorage.getItem('resId');
let height = Vue.ref(window.innerHeight);
let cloudList = Vue.ref();
cloudList.value = [
{
// 实例数量
flag: 'capacity-mysql-total',
kpiIds:'KPI6D78305E',
name:'实例数量',
map:{}
},{
// Mysql/MariaDB实例
flag: 'capacity-mysql-mysql-count',
kpiIds:'KPI4149780A',
name:'Mysql/MariaDB实例',
map:{}
},{
// 分布式Mysql实例
flag: 'capacity-mysql-distributed',
kpiIds:'KPIAAF0E124',
name:"分布式Mysql实例",
map:{}
},{
// CPU使用情况 已用
flag: 'capacity-mysql-cpu-used',
kpiIds:'KPIB5848895',
name:'CPU使用情况 已用',
map:{}
},{
// CPU使用情况 总量
flag: 'capacity-mysql-cpu-total',
kpiIds:'KPI8DBA891C',
name:'CPU使用情况 总量',
map:{}
},{
// 内存使用情况 已用
flag: 'capacity-mysql-mem-used',
kpiIds:'KPI4A216352',
name: '内存使用情况 已用',
map:{}
},{
// 内存使用情况 总量
flag: 'capacity-mysql-mem-total',
kpiIds:'KPI1DA60197',
name: '内存使用情况 总量',
map:{}
},{
// 磁盘使用情况 已用
flag: 'capacity-mysql-disk-used',
kpiIds:'KPI1988842F',
name: '磁盘使用情况 已用',
map:{}
},{
//磁盘使用情况 总量
flag: 'capacity-mysql-disk-total',
kpiIds:'KPIBA50E567',
name: '磁盘使用情况 总量',
map:{}
}
]
let getList = ()=>{
// 快照数量
// proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
// resId:resId,
// flag:"capacity-disk-snapshotCount",
// kpiIds:"KPI2AABE086",
// },(res)=>{
// // console.log(res);
// if (Object.keys(res.map).length){
//
// }
// },(err)=>{
// console.log(err);
// })
cloudList.value.forEach((item,index)=>{
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:resId,
flag:item.flag,
kpiIds:item.kpiIds,
},(res)=>{
if (Object.keys(res.map).length){
item.map = res.map;
}
},(err)=>{
console.log(err);
})
})
}
getList();
return {
height,
cloudList
}
}
}
\ No newline at end of file
... ...