monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 25f99ee240025915ab12e6b0ea39127975195b36 2 parents 42728d29 bc19883f

Merge branch 'mater-ztq' into 'master' 

腾讯云展示租户详情页



See merge request !1222
Inline Side-by-side
Showing 13 changed files with 187 additions and 7 deletions
... ... @@ -4008,10 +4008,11 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
layer.alert('该资源只对接TRAP告警信息!',{icon:0});
return;
}
//如果是腾讯云平台且是租户，则没有详情页
//如果是腾讯云平台且是租户，则跳转租户页面
if (res.resType === 'TENCENT_CLOUD_PLAT' && res.platUserType !== '0'){
layer.alert('只有运营端有详情页!',{icon:0});
return;
// layer.alert('只有运营端有详情页!',{icon:0});
// return;
url = common.detailPath(res.resType+'_TENANT',res.resId,protocol);
}
//url(/src/style/img/shutdown.png)
title +=`<span id="title-shutdown" data-id=${resId} style="flex:1;padding:0 5px;width:600px;display: inline-block;position: relative;top: 0px;left:20px;"></span>`
... ...
<style>
</style>
<article class="page-container template template_redis">
<div class="page-panel">
<div class="main">
<div class="layui-card">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<iframe src="/vue3/index.html#/vue3/tencentCloudTenant" class="layadmin-iframe" style="height: 748px!important;border: none!important;"/>
</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
... ...
... ... @@ -232,11 +232,100 @@
.td-sql-ratio-box .res-ratio .progress{
width: 40%;
}
.tencent-tenant-title{
padding: 20px 0px;
border-bottom: 1px solid #E3E3E3;
}
.tencent-tenant-items{
display: flex;
flex-wrap: wrap;
align-content: start;
}
.tencent-tenant-items .tencent-tenant-item{
width: calc((100% - 36px) / 3);
height: 154px;
background: linear-gradient(181deg, #EAF1FF, #FFFFFF);
box-shadow: -1px 4px 3px 0px rgba(71,71,71,0.05);
border-radius: 15px;
margin-right: 18px;
margin-top: 18px;
display: flex;
justify-content: space-around;
align-items: center;
}
.tencent-tenant-items .tencent-tenant-item:nth-of-type(3n){
margin-right: 0;
}
.tencent-tenant-img{
width: 90px;
height: 85px;
}
.tencent-tenant-info{
width: 330px;
height: 100%;
}
.tencent-tenant-name{
border-bottom: 1px solid #D5E3FA;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.tencent-tenant-name .tencent-tenant-resTypeName{
font-weight: bold;
font-size: 16px;
margin-left: 18px;
}
.tencent-tenant-name .tencent-tenant-count{
font-size: 30px;
font-weight: bold;
color: #15162B;
margin-right: 50px;
}
.tencent-tenant-alarm{
width: 100%;
height: calc(100% - 72px);
display: flex;
align-items: center;
justify-content: space-between;
}
.tencent-tenant-normalCount{
color: #0BAC33;
margin-left: 18px;
font-weight: 500;
text-align: right;
}
.tencent-tenant-normalCount div:nth-of-type(1){
margin-bottom: 14px;
}
.tencent-tenant-normalCount div:nth-of-type(1):before{
content: '';
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 12px;
background-color: #0BAC33;
}
.tencent-tenant-alarmCount{
color: #D81E06;
margin-right: 50px;
font-weight: 500;
text-align: right;
}
.tencent-tenant-alarmCount div:nth-of-type(1){
margin-bottom: 14px;
}
.tencent-tenant-alarmCount div:nth-of-type(1):before{
content: '';
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 12px;
background-color: #D81E06;
}
... ...
... ... @@ -211,6 +211,10 @@ const routes = [{
path: '/vue3/tencentCloudTDSQL', // 腾讯云--TDSQL-Msql资源
name: 'tencentCloudTDSQL',
component: ()=> myImport('views/tencentCloud/tencentCloudTDSQL')
},{
path: '/vue3/tencentCloudTenant', // 腾讯云租户
name: 'tencentCloudTDSQL',
component: ()=> myImport('views/tencentCloud/tencentCloudTenant')
}
];
... ...
<div>
<div class="cm-card" style="background: #f1f4fb;text-align: left;">
<div class="tencent-cloud-box">
<div class="tencent-tenant-title">
<span>资源统计信息</span>
</div>
<div class="tencent-tenant-items">
<div class="tencent-tenant-item" v-for="(item,index) in tenantList" :key="index">
<img class="tencent-tenant-img" :src="'/vue3/src/assets/images/machineRoom/TENCENT_CLOUD_PLAT_'+item.type+'.png'" alt="">
<div class="tencent-tenant-info">
<div class="tencent-tenant-name">
<div class="tencent-tenant-resTypeName">{{item.resTypeName}}</div>
<div class="tencent-tenant-count">{{item.count}}</div>
</div>
<div class="tencent-tenant-alarm">
<div class="tencent-tenant-normalCount">
<div>正常量</div>
<div>{{item.normalCount}}</div>
</div>
<div class="tencent-tenant-alarmCount">
<div>异常量</div>
<div>{{item.alarmCount}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
... ...
export default {
name: "tencentCloudTenant",
template: '',
components: {},
props: [],
setup(props,{attrs,slots,emit}){
const {proxy} = Vue.getCurrentInstance();
const resId = localStorage.getItem('resId');
let height = Vue.ref(window.innerHeight);
let tenantList = Vue.ref([])
let getList = ()=>{
proxy.$http.get(`/api-web/bResource/tenantStatistics`,{
resId:resId,
},(res)=>{
console.log(res.data);
tenantList.value = res.data;
tenantList.value.forEach(item=>{
item.type='tencent-cloud-host';
})
},(err)=>{
console.log(err);
})
}
getList();
return {
tenantList,
}
}
}
\ No newline at end of file
... ...