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 155 additions and 41 deletions
@@ -326,4 +326,83 @@ @@ -326,4 +326,83 @@
326 to { 326 to {
327 -webkit-transform: rotate(360deg); 327 -webkit-transform: rotate(360deg);
328 } 328 }
329 -}  
  329 +}
  330 +.assets-popper-class {
  331 + background-repeat: no-repeat!important;
  332 + padding: 0!important;
  333 + background-size: 100% 100%!important;
  334 + background: none!important;
  335 + border: none!important;
  336 +}
  337 +.layout2{
  338 + width: 318px!important;
  339 + height: 167px;
  340 + background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/bg.png')!important;
  341 +}
  342 +
  343 +.layout2 .left-item {
  344 + width: 40%;
  345 + height: 100px;
  346 +}
  347 +
  348 +.layout2 .left-item .left-item-top{
  349 + width: 100%;
  350 + height: 30px;
  351 + background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/left-bg.png')!important;
  352 + background-repeat: no-repeat!important;
  353 + background-size: 100px 30px!important;
  354 + margin-top: 45px;
  355 + margin-left: 15px;
  356 + font-size: 14px;
  357 + font-weight: bold;
  358 + color: white;
  359 + padding-left: 20px;
  360 + padding-top: 7px;
  361 +}
  362 +
  363 +.layout2 .left-item .left-item-bottom{
  364 + width: 100%;
  365 + height: 50%;
  366 + background-image: url('/vue3/src/assets/images/zjdp/assets/left.png')!important;
  367 + background-repeat: no-repeat!important;
  368 + background-size: 100px 60px!important;
  369 + margin-top: 0px;
  370 + margin-left: 15px;
  371 + padding-left: 30px;
  372 + color: white;
  373 +}
  374 +
  375 +.layout2 .right-item {
  376 + width: 60%;
  377 + height: 100px;
  378 + padding-top: 30px;
  379 + display: flex;
  380 + flex-wrap: wrap;
  381 + justify-content: center;
  382 + align-items: center;
  383 +}
  384 +.layout2 .right-item .text{
  385 + background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/text.png')!important;
  386 + background-repeat: no-repeat!important;
  387 + background-size: 90% 30px!important;
  388 + width: 100%;
  389 + height: 30px;
  390 + margin-top: 15px;
  391 + color: white;
  392 + padding-left: 10px;
  393 + padding-top: 3px;
  394 + display: flex;
  395 + flex-wrap: nowrap;
  396 + align-items: center;
  397 +}
  398 +
  399 +.layout2 .right-item .text div {
  400 + margin-left: 5px;
  401 +}
  402 +
  403 +.layout2 .right-item .text .dd {
  404 + width: 5px;
  405 + height: 5px;
  406 + background: white;
  407 + border-radius: 50%;
  408 +}
@@ -7,9 +7,11 @@ @@ -7,9 +7,11 @@
7 <div class="asset-overview-tip"> 7 <div class="asset-overview-tip">
8 <div class="tip yxqk_tips_div"> 8 <div class="tip yxqk_tips_div">
9 <div class="asset-tip"> 9 <div class="asset-tip">
10 - <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p> 10 + <!-- // Start Wang 2021/12/14 14:48 去除悬浮 -->
  11 + <!--<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>-->
  12 + <p> <i class="tip-i"></i> <span>资产总量</span></p>
11 <!--悬浮提示信息--> 13 <!--悬浮提示信息-->
12 - <div class="yxqk_tips_container" v-show="isShow" > 14 + <!--<div class="yxqk_tips_container" v-show="isShow" >
13 <ul class="items" id="yxjk_resource_type_count_tips" > 15 <ul class="items" id="yxjk_resource_type_count_tips" >
14 <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv"> 16 <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
15 <li v-for="(item,index) in assetOverviewDataAll"> 17 <li v-for="(item,index) in assetOverviewDataAll">
@@ -18,13 +20,11 @@ @@ -18,13 +20,11 @@
18 </li> 20 </li>
19 </div> 21 </div>
20 </ul> 22 </ul>
21 - </div> 23 + </div>-->
  24 + <!-- // End Wang 2021/12/14 14:48 去除悬浮 -->
22 </div> 25 </div>
23 26
24 <b id="yxjk_total_resource">{{totalData}}</b> 27 <b id="yxjk_total_resource">{{totalData}}</b>
25 -  
26 -  
27 -  
28 </div> 28 </div>
29 <div id="all_resource_status" :class="['yxqk__pie',pieClass]"> 29 <div id="all_resource_status" :class="['yxqk__pie',pieClass]">
30 <span id="yxjk_resource_health_text">{{healthStatusName}}</span> 30 <span id="yxjk_resource_health_text">{{healthStatusName}}</span>
@@ -34,20 +34,43 @@ @@ -34,20 +34,43 @@
34 </div> 34 </div>
35 35
36 <div class="items"> 36 <div class="items">
37 - <!--<span class="yxqk__banner&#45;&#45;top"></span>-->  
38 - <!--<span class="yxqk__banner&#45;&#45;bottom"></span>-->  
39 <div id="yxqk__banner"> 37 <div id="yxqk__banner">
40 <ul id="yxjk_resource_type_count_id"> 38 <ul id="yxjk_resource_type_count_id">
41 <div id="yxjk_resource_type_count_id_tmpl"> 39 <div id="yxjk_resource_type_count_id_tmpl">
42 <li :class="'list-'+index" v-for="(item,index) in assetOverviewDataAll"> 40 <li :class="'list-'+index" v-for="(item,index) in assetOverviewDataAll">
43 - <img :src="'src/assets/images/zjdp/'+item.code+'.png'"> 41 + <img :src="'src/assets/images/zjdp/'+item.alias+'.png'">
44 <div style="margin-left: .02rem;"> 42 <div style="margin-left: .02rem;">
45 - <p>{{item.name}}</p>  
46 - <div class="listNum">  
47 - <b>{{item.num}}</b><span>台</span>  
48 - </div>  
49 -  
50 - 43 + <el-popover placement="right-start" trigger="click" @show="showPopover(item)" popper-class="assets-popper-class layout2">
  44 + <template #reference>
  45 + <div>
  46 + <p>{{item.name}}</p>
  47 + <div class="listNum">
  48 + <b>{{item.value}}</b><span>台</span>
  49 + </div>
  50 + </div>
  51 + </template>
  52 + <div style="display: flex;height: 100%">
  53 + <div class="left-item">
  54 + <div class="left-item-top">
  55 + {{item.name}}
  56 + </div>
  57 + <div class="left-item-bottom">
  58 + <b>{{item.value}}</b><span>台</span>
  59 + </div>
  60 + </div>
  61 + <div class="right-item" >
  62 + <div v-if="list.length == 0" class="text">
  63 + <span>暂无数据</span>
  64 + </div>
  65 + <div v-else v-for="d in list" class="text">
  66 + <div class="dd"></div>
  67 + <div class="name">{{d.name}}</div>
  68 + <div class="value">{{d.value}}</div>
  69 + <div class="unit">台</div>
  70 + </div>
  71 + </div>
  72 + </div>
  73 + </el-popover>
51 </div> 74 </div>
52 </li> 75 </li>
53 </div> 76 </div>
@@ -39,52 +39,64 @@ export default { @@ -39,52 +39,64 @@ export default {
39 proxy.totalData=data.count; 39 proxy.totalData=data.count;
40 } 40 }
41 //分类总量 41 //分类总量
42 - if(data && data.object){ 42 + if(data && data.data){
43 // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量 43 // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
44 - // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER']; 44 +
45 let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0; 45 let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
46 const showData = [];//展示的类型 46 const showData = [];//展示的类型
47 //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量 47 //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
48 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死 48 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
49 - $.each(data.object,function (i,v) { 49 + $.each(data.data,function (i,v) {
50 if(i<6){ 50 if(i<6){
51 showData.push(v) 51 showData.push(v)
52 } 52 }
53 - /* const resType = v.code;  
54 - if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }  
55 - if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }  
56 - if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }  
57 - if(resType.indexOf('HOST_MINICOMPUTER_PARTITION') >= 0 ) { minicomputer_partition += v.num; }  
58 - if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }  
59 - if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }*/  
60 }); 53 });
61 - /* showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});  
62 - showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});  
63 - showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});  
64 - showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});  
65 - showData.push({name:"存储",num:storage,code:'STORAGE'});  
66 - showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});*/  
67 - //类型统计  
68 -  
69 proxy.assetOverviewData=showData; 54 proxy.assetOverviewData=showData;
70 - proxy.assetOverviewDataAll=data.object;  
71 - 55 + proxy.assetOverviewDataAll=data.data;
72 //悬浮提示 56 //悬浮提示
73 -  
74 } 57 }
75 }); 58 });
76 -  
77 }) 59 })
78 const showTip=()=>{ 60 const showTip=()=>{
79 proxy.isShow=true; 61 proxy.isShow=true;
80 -  
81 } 62 }
82 const hideTip=()=>{ 63 const hideTip=()=>{
83 proxy.isShow=false; 64 proxy.isShow=false;
84 } 65 }
  66 +
  67 + // Start Wang 2021/12/14 14:47 展示资产详情
  68 + let list = Vue.ref([]);
  69 + let obj = Vue.ref({});
  70 + /**
  71 + * 显示时触发
  72 + * <p>
  73 + * 作者： Wang
  74 + * 时间：2021/12/14 15:06
  75 + */
  76 + let showPopover = (item) =>{
  77 + let itemId = item.id;
  78 +
  79 + if(obj.value[itemId]){
  80 + list.value = obj.value[itemId];
  81 + }
  82 +
  83 + // 获取数据
  84 + proxy.$http.get('/api-web/bigScreen/getSeedSataus',{id:itemId},function (res){
  85 + if(res && res.data){
  86 + list.value = res.data;
  87 + if(res.data.length > 0){
  88 + obj.value[itemId] = res.data;
  89 + }
  90 + }
  91 + },null,false)
  92 + }
  93 + // End Wang 2021/12/14 14:47 展示资产详情
  94 +
85 return{ 95 return{
86 showTip, 96 showTip,
87 - hideTip 97 + hideTip,
  98 + list,
  99 + showPopover
88 } 100 }
89 } 101 }
90 -}  
  102 +}