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 620 additions and 84 deletions
<!--tencent_cloud_plat详细页面-->
<article class="page-container template template_redis">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-body">
<div class="lay-row">
<div class="lay-row-item lay-row-item--big">
<h5 class="lay-row-title">基本信息<i data-id="tencent_cloud_plat_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
<ul class="info-table" id="tencent_cloud_plat_baseinfo"></ul>
</div>
<div class="lay-row-item lay-row-item--small">
<h5 class="lay-row-title">资源状态</h5>
<div class="res-state" id="tencent_cloud_plat_health_state"></div>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<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>
<div id="tencent_cloud_plat_setting"></div>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">实时告警动态</h5>
<div id="tencent_cloud_plat_active_alarm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<textarea id="tencent_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
<script>
layui.use('tencent_cloud_plat', function (fn) {
var $ = layui.$;
var parm = $("#tencent_cloud_plat_param_id").val();
if(parm.indexOf('{{d') != -1){
fn();
}else{
fn(JSON.parse(parm));
}
});
</script>
\ No newline at end of file
... ...
<!--tencent_cloud_plat_cluster详细页面-->
<style>
#content{
padding: 5px;
background: #f1f4fb;
}
.overview{
display: flex;
justify-content: flex-start;
align-items: center;
}
.overview>div.overview-item{
width: 50%;
box-sizing: border-box;
}
.overview-item:nth-of-type(1){
margin-right: 5px;
}
.overview-item-dialog{
border-radius: 4px;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
}
.overview-item-dialog header{
padding: 10px 0;
font-size: 18px;
font-weight: bold;
}
.overview-item:nth-of-type(1) .overview-item-dialog header{
color: #0b50b8;
border-bottom: 2px solid #d5e5fc;
}
.overview-item:nth-of-type(2) .overview-item-dialog header{
color: #0069a5;
border-bottom: 2px solid #c3e9f2;
}
.overview-item-host,.overview-item-virtualMachine{
display: flex;
align-items: center;
justify-content: flex-start;
padding: 40px 0px;
}
.overview-item-host{
padding-bottom: 0;
}
.overview-item-host .host-img,.overview-item-virtualMachine .virtualMachine-img{
display: flex;
flex-direction: column;
align-items: center;
padding-right: 20px;
border-right: 2px solid #d5e5fc;
}
.overview-item-host .host-img img,.overview-item-virtualMachine .virtualMachine-img img{
height: 100px;
margin-bottom: 30px;
}
.overview-item-host .host-num,
.overview-item-virtualMachine .virtualMachine-num{
padding-left: 20px;
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
}
.overview-item-host .host-num .host-num-item,
.overview-item-virtualMachine .virtualMachine-num .virtualMachine-num-item{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex: 1;
}
.host-num-item-value,.virtualMachine-num-item-value{
height: 130px;
line-height: 130px;
font-size: 28px;
font-weight: bold;
}
.count{
color: #575d6d;
}
.success{
color:#24ae1b;
}
.error{
color: #d71d04;
}
.waring{
color: #ff7f02;
}
.overview-item-box{
margin: 5px 0;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
border-radius: 4px;
}
.overview-item-box header{
font-size: 18px;
font-weight: bold;
color: #555c6c;
padding: 10px 0;
border-bottom: 2px solid;
}
.res-ratio{
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px 0px;
}
.res-ratio .progress{
width: 68%;
margin: 0 10px;
background-color: #eef7fe;
overflow: hidden;
height: 30px;
border-radius: 30px;
}
.progress-bar{
height: 30px;
line-height: 30px;
text-align: right;
border-radius: 30px;
background: #469bf5;
color: #FFFFFF;
}
</style>
<article class="page-container template template_redis">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-card-body">
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">基本信息<i data-id="tencent_cloud_plat_cluster_baseinfo" class="iconfont detail_base_info">&#xe61e;</i></h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_baseinfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">重要信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_keyinfo"></ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">Node信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_nodeinfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">Pod信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_podinfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">项目信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_projectinfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">应用信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_appinfo"></ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">cpu信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_cpuinfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">内存信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_meminfo"></ul>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">磁盘信息</h5>
<ul class="info-table" id="tencent_cloud_plat_cluster_diskinfo"></ul>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">CPU分配率</h5>
<div id="tencent_cloud_plat_cluster_cpu_linechart" class="detail_line_chart"></div>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">内存分配率</h5>
<div id="tencent_cloud_plat_cluster_mem_linechart" class="detail_line_chart"></div>
</div>
<div class="lay-row-item">
<h5 class="lay-row-title">磁盘分配率</h5>
<div id="tencent_cloud_plat_cluster_disk_linechart" class="detail_line_chart"></div>
</div>
</div>
<div class="lay-row">
<div class="lay-row-item">
<h5 class="lay-row-title">实时告警动态</h5>
<div id="tencent_cloud_plat_cluster_active_alarm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<textarea id="tencent_cloud_plat_cluster_param_id" style="display: none;">{{d}}</textarea>
<script>
layui.use('tencent_cloud_plat_cluster', function (fn) {
var $ = layui.$;
var parm = $("#tencent_cloud_plat_cluster_param_id").val();
if(parm.indexOf('{{d') != -1){
fn();
}else{
fn(JSON.parse(parm));
}
});
</script>
\ No newline at end of file
<iframe src="/vue3/index.html#/vue3/tencentCloud" class="layadmin-iframe" style="height: 99.5%!important;"/>
</article>
\ No newline at end of file
... ...
... ... @@ -117,6 +117,11 @@ const routes = [{
name: 'license',
component: () => myImport('views/license/index')
},
{
path: '/vue3/tencentCloud',
name: 'tencentCloud',
component: ()=> myImport('views/tencentCloud/index')
}
];
// hash模式： createWebHashHistory
... ...
<div>
<div id="content">
<div class="overview">
<div class="overview-item" v-for="(item,index) in overviewList" :key="index">
<div class="overview-item-dialog">
<header>{{ item.title }}</header>
<div class="overview-item-host">
<div class="host-img">
<img src="../../../public/shui.png" alt="">
<span>{{item.host.name}}</span>
</div>
<div class="host-num">
<div class="host-num-item">
<span class="host-num-item-value count">
<span>{{item.host.total}}</span>
<span style="font-size: 16px;margin-left: 5px;">台</span>
</span>
<span>总量</span>
</div>
<div class="host-num-item">
<span class="host-num-item-value success">{{item.host.success}}</span>
<span>正常</span>
</div>
<div class="host-num-item">
<span class="host-num-item-value error">{{item.host.error}}</span>
<span>异常</span>
</div>
<div class="host-num-item">
<span class="host-num-item-value waring">{{item.host.stop}}</span>
<span>暂停</span>
</div>
<div class="host-num-item">
<span class="host-num-item-value waring">{{item.host.operating}}</span>
<span>操作中</span>
</div>
<div class="host-num-item"></div>
</div>
</div>
<div class="overview-item-virtualMachine">
<div class="virtualMachine-img">
<img src="../../../public/shui.png" alt="">
<span>{{item.virtualMachine.name}}</span>
</div>
<div class="virtualMachine-num">
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value count">
<span>{{item.virtualMachine.total}}</span>
<span style="font-size: 16px;margin-left: 5px;">台</span>
</span>
<span>总量</span>
</div>
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value success">{{item.virtualMachine.success}}</span>
<span>正常</span>
</div>
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value waring">{{item.virtualMachine.operating}}</span>
<span>操作中</span>
</div>
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value waring">{{item.virtualMachine.shutdown}}</span>
<span>已关机</span>
</div>
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value waring">{{item.virtualMachine.recovery}}</span>
<span>待回收</span>
</div>
<div class="virtualMachine-num-item">
<span class="virtualMachine-num-item-value error">{{item.virtualMachine.waring}}</span>
<span>异常</span>
</div>
</div>
</div>
</div>
<div class="overview-item-box">
<header>{{item.res.title}}</header>
<div class="res-ratio">
<div>CPU</div>
<div class="progress">
<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>
</div>
<div>已使用：{{item.res.cpu.use}}核/总量：{{item.res.cpu.count}}核</div>
</div>
<div class="res-ratio">
<div>内存</div>
<div class="progress">
<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>
</div>
<div>已使用：{{item.res.storage.use}}G/总量：{{item.res.storage.count}}G</div>
</div>
<div class="res-ratio">
<div>磁盘</div>
<div class="progress">
<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>
</div>
<div>已使用：{{item.res.disk.use}}G/总量：{{item.res.disk.count}}G</div>
</div>
</div>
</div>
</div>
</div>
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 365"
:loading="false"
:pageSize="queryParams.pageSize"
:showBorder="true"
:showIndex="true"
:showPage="true"
:showSelection="false"
:showTools="true"
:total="queryParams.count"
@loaddata="loaddata">
<template #default="{row,prop,column}">
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg" @click="handleDetail(scope.row)">
<i class="el-icon-document" title="详情"></i>
</span>
</div>
</template>
</cm-table-page>
</div>
\ No newline at end of file
... ...
export default {
name:"tencentCloud",
setup(props,{attrs,slots,emit}){
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let overviewList=Vue.ref([
{
title:"CVM(overlay)资源实例概览",
host:{
name:"overlay宿主机",
total:68,
success:68,
error:0,
stop:0,
operating:0,
},
virtualMachine:{
name:"overlay虚拟机",
total:734,
success:734,
operating:0,
shutdown:2,
recovery:0,
waring:0
},
res:{
title:"overlay资源(核)",
cpu:{
use:7300,
count:8704,
ratio:0,
},
storage:{
use:2690,
count:31280,
ratio:0,
},
disk:{
use:0,
count:0,
ratio:0,
}
}
},
{
title:"CVM(underlay)资源实例概览",
host:{
name:"underlay宿主机",
total:68,
success:68,
error:0,
stop:0,
operating:0,
},
virtualMachine:{
name:"underlay虚拟机",
total:734,
success:734,
operating:0,
shutdown:2,
recovery:0,
waring:0
},
res:{
title:"underlay资源(核)",
cpu:{
use:7300,
count:8704,
ratio:0,
},
storage:{
use:2690,
count:31280,
ratio:0,
},
disk:{
use:105676,
count:160440,
ratio:0,
}
}
}
])
//表格字段
let tableData = Vue.ref({
dataList: [],
columns: [
{
prop: 'resTypeName',
label: '可用区',
sortable: true,
align: 'center',
width: '200',
},
{
prop: 'resName',
label: '售卖池',
sortable: true,
align: 'center'
},
{
prop: 'ip',
label: '实例类型',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'admin',
label: '网络类型',
sortable: true,
align: 'center',
width: '130'
}, {
prop: 'busTypeName',
label: 'CPU(已用/总量)',
sortable: true,
align: 'center',
width: '270'
},
{
prop: 'nickname',
label: '剩余CPU(核)',
sortable: true,
align: 'center',
width: '150'
},
{
prop: 'createUser',
label: '内存(已用/总量)',
sortable: true,
align: 'center',
width: '130'
},
{
prop: 'createTime',
label: '剩余内存(G)',
sortable: true,
align: 'center',
width: '170'
},{
prop: 'createTime',
label: '磁盘(已用/总量)',
sortable: true,
align: 'center',
width: '170'
},
]
})
let dict = {
total:"KPI43C8CCFC",
success:"KPI95E996B3",
error:"KPI597F8EA4",
stop:"KPIC1A8B053",
operating:"KPIBD0389BD",
shutdown:"KPI7FCD9C30",
recovery:"KPI7FCD9C30",
waring:"KPICA7BF228",
}
let dictCpu = {
use:"",
count:"",
ratio:"",
}
let dictMem = {
use:"",
count:"",
ratio:"",
}
let dictDisk = {
use:"",
count:"",
ratio:"",
}
// 获取列表
let getDataList = () => {
// 资源实例概览
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"overlay-physic-",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dict){
overviewList.data[0].host[i] = res.data[dict[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"overlay-virtual-",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dict){
overviewList.data[0].virtualMachine[i] = res.data[dict[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"under-physic-",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dict){
overviewList.data[1].host[i] = res.data[dict[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"under-virtual-",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dict){
overviewList.data[1].virtualMachine[i] = res.data[dict[i]];
}
},(err)=>{
console.log(err);
})
// 资源使用率
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"overlay-cpu",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictCpu){
overviewList.data[0].res[i] = res.data[dictCpu[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"overlay-mem",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictMem){
overviewList.data[0].res[i] = res.data[dictMem[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"overlay-disk",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictDisk){
overviewList.data[0].res[i] = res.data[dictDisk[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"under-cpu",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictCpu){
overviewList.data[1].res[i] = res.data[dictCpu[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"under-mem",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictMem){
overviewList.data[1].res[i] = res.data[dictMem[i]];
}
},(err)=>{
console.log(err);
})
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"under-disk",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
for (let i in dictDisk){
overviewList.data[1].res[i] = res.data[dictDisk[i]];
}
},(err)=>{
console.log(err);
})
// 表格
proxy.$http.get(`/api-web/detail/getTencentCloudPlatInfo`,{
resId:"66c74f6cdc044baca787af8f5fc35840",
flag:"tencent-capacity",
kpiIds:"KPI43C8CCFC,KPI95E996B3,KPI597F8EA4,KPIC1A8B053,KPIBD0389BD",
},(res)=>{
},(err)=>{
console.log(err);
})
};
return {
height,
tableData,
overviewList,
}
}
}
\ No newline at end of file
... ...