monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 4c62e35d7770bc419a62437b8941c1a0323e40f8 1 parent 033d2da1

资产概览 弹框

Inline Side-by-side
Showing 13 changed files with 150 additions and 36 deletions
... ... @@ -327,3 +327,82 @@
-webkit-transform: rotate(360deg);
}
}
.assets-popper-class {
background-repeat: no-repeat!important;
padding: 0!important;
background-size: 100% 100%!important;
background: none!important;
border: none!important;
}
.layout2{
width: 318px!important;
height: 167px;
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/bg.png')!important;
}
.layout2 .left-item {
width: 40%;
height: 100px;
}
.layout2 .left-item .left-item-top{
width: 100%;
height: 30px;
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/left-bg.png')!important;
background-repeat: no-repeat!important;
background-size: 100px 30px!important;
margin-top: 45px;
margin-left: 15px;
font-size: 14px;
font-weight: bold;
color: white;
padding-left: 20px;
padding-top: 7px;
}
.layout2 .left-item .left-item-bottom{
width: 100%;
height: 50%;
background-image: url('/vue3/src/assets/images/zjdp/assets/left.png')!important;
background-repeat: no-repeat!important;
background-size: 100px 60px!important;
margin-top: 0px;
margin-left: 15px;
padding-left: 30px;
color: white;
}
.layout2 .right-item {
width: 60%;
height: 100px;
padding-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.layout2 .right-item .text{
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/text.png')!important;
background-repeat: no-repeat!important;
background-size: 90% 30px!important;
width: 100%;
height: 30px;
margin-top: 15px;
color: white;
padding-left: 10px;
padding-top: 3px;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.layout2 .right-item .text div {
margin-left: 5px;
}
.layout2 .right-item .text .dd {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
}
... ...
... ... @@ -7,9 +7,11 @@
<div class="asset-overview-tip">
<div class="tip yxqk_tips_div">
<div class="asset-tip">
<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
<!-- // Start Wang 2021/12/14 14:48 去除悬浮 -->
<!--<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>-->
<p> <i class="tip-i"></i> <span>资产总量</span></p>
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<!--<div class="yxqk_tips_container" v-show="isShow" >
<ul class="items" id="yxjk_resource_type_count_tips" >
<div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
<li v-for="(item,index) in assetOverviewDataAll">
... ... @@ -18,13 +20,11 @@
</li>
</div>
</ul>
</div>
</div>-->
<!-- // End Wang 2021/12/14 14:48 去除悬浮 -->
</div>
<b id="yxjk_total_resource">{{totalData}}</b>
</div>
<div id="all_resource_status" :class="['yxqk__pie',pieClass]">
<span id="yxjk_resource_health_text">{{healthStatusName}}</span>
... ... @@ -34,20 +34,43 @@
</div>
<div class="items">
<!--<span class="yxqk__banner&#45;&#45;top"></span>-->
<!--<span class="yxqk__banner&#45;&#45;bottom"></span>-->
<div id="yxqk__banner">
<ul id="yxjk_resource_type_count_id">
<div id="yxjk_resource_type_count_id_tmpl">
<li :class="'list-'+index" v-for="(item,index) in assetOverviewDataAll">
<img :src="'src/assets/images/zjdp/'+item.code+'.png'">
<img :src="'src/assets/images/zjdp/'+item.alias+'.png'">
<div style="margin-left: .02rem;">
<el-popover placement="right-start" trigger="click" @show="showPopover(item)" popper-class="assets-popper-class layout2">
<template #reference>
<div>
<p>{{item.name}}</p>
<div class="listNum">
<b>{{item.num}}</b><span>台</span>
<b>{{item.value}}</b><span>台</span>
</div>
</div>
</template>
<div style="display: flex;height: 100%">
<div class="left-item">
<div class="left-item-top">
{{item.name}}
</div>
<div class="left-item-bottom">
<b>{{item.value}}</b><span>台</span>
</div>
</div>
<div class="right-item" >
<div v-if="list.length == 0" class="text">
<span>暂无数据</span>
</div>
<div v-else v-for="d in list" class="text">
<div class="dd"></div>
<div class="name">{{d.name}}</div>
<div class="value">{{d.value}}</div>
<div class="unit">台</div>
</div>
</div>
</div>
</el-popover>
</div>
</li>
</div>
... ...
... ... @@ -39,52 +39,64 @@ export default {
proxy.totalData=data.count;
}
//分类总量
if(data && data.object){
if(data && data.data){
// //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
const showData = [];//展示的类型
//华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
$.each(data.object,function (i,v) {
$.each(data.data,function (i,v) {
if(i<6){
showData.push(v)
}
/* const resType = v.code;
if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
if(resType.indexOf('HOST_MINICOMPUTER_PARTITION') >= 0 ) { minicomputer_partition += v.num; }
if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }*/
});
/* showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
showData.push({name:"存储",num:storage,code:'STORAGE'});
showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});*/
//类型统计
proxy.assetOverviewData=showData;
proxy.assetOverviewDataAll=data.object;
proxy.assetOverviewDataAll=data.data;
//悬浮提示
}
});
})
const showTip=()=>{
proxy.isShow=true;
}
const hideTip=()=>{
proxy.isShow=false;
}
// Start Wang 2021/12/14 14:47 展示资产详情
let list = Vue.ref([]);
let obj = Vue.ref({});
/**
* 显示时触发
* <p>
* 作者： Wang
* 时间：2021/12/14 15:06
*/
let showPopover = (item) =>{
let itemId = item.id;
if(obj.value[itemId]){
list.value = obj.value[itemId];
}
// 获取数据
proxy.$http.get('/api-web/bigScreen/getSeedSataus',{id:itemId},function (res){
if(res && res.data){
list.value = res.data;
if(res.data.length > 0){
obj.value[itemId] = res.data;
}
}
},null,false)
}
// End Wang 2021/12/14 14:47 展示资产详情
return{
showTip,
hideTip
hideTip,
list,
showPopover
}
}
}
... ...