monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit e5d2f60c1f1b4fc70efe784623a651ec2e3bb74b 2 parents 24a7597e c391bff2

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 33 changed files with 777 additions and 98 deletions
@@ -342,8 +342,9 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -342,8 +342,9 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
342 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true}, 342 {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
343 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'}, 343 {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
344 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'}, 344 {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
345 - {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},  
346 - {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true} 345 +
  346 + {field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true},
  347 + {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
347 ], 348 ],
348 "HUAWEI_CLOUD_CLUSTER": [ 349 "HUAWEI_CLOUD_CLUSTER": [
349 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'}, 350 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
@@ -599,7 +599,6 @@ export default { @@ -599,7 +599,6 @@ export default {
599 fileNameData.push(v.fileName) 599 fileNameData.push(v.fileName)
600 } 600 }
601 }) 601 })
602 - alert(fileNameData)  
603 602
604 let params = { 603 let params = {
605 info: info.join(","), 604 info: info.join(","),
@@ -192,8 +192,17 @@ global.openCmdbAssets = (resTypeId, resId, proxy) => { @@ -192,8 +192,17 @@ global.openCmdbAssets = (resTypeId, resId, proxy) => {
192 } 192 }
193 193
194 global.openDetail = (resId, resType, title) => { 194 global.openDetail = (resId, resType, title) => {
195 - let url = window.top.location.href.split('/#')[0] + `/#/res/resDetail/resId=${resId}/resType=${resType}/title=${title}`;  
196 - global.openBlankWindow(url); 195 + // let url = `/#/res/resDetail/view/resId=${resId}`;
  196 + let url = window.top.location.href.split('/#')[0] + `/#/res/resDetail/view/resId=${resId}`;
  197 + if(resType){
  198 + url += '/resType=' + resType
  199 + }
  200 +
  201 + if(title){
  202 + url += '/title=' + title
  203 + }
  204 +
  205 + // global.openBlankWindow(url);
197 } 206 }
198 207
199 /** 208 /**
@@ -11,7 +11,7 @@ html @@ -11,7 +11,7 @@ html
11 font-size:14px; 11 font-size:14px;
12 font-family:Arial, Helvetica, sans-serif; 12 font-family:Arial, Helvetica, sans-serif;
13 -webkit-text-size-adjust:none; 13 -webkit-text-size-adjust:none;
14 - background-image:url("../img/img-beijing.png"); 14 + background-image:url("../img/img-beijing-dp.png");
15 background-repeat: no-repeat; 15 background-repeat: no-repeat;
16 background-position: center; 16 background-position: center;
17 } 17 }
@@ -36,7 +36,8 @@ body @@ -36,7 +36,8 @@ body
36 36
37 } 37 }
38 .outlinediv span { 38 .outlinediv span {
39 - color: rgba(0, 0, 0, 0.89); 39 + /*color: rgba(0, 0, 0, 0.89);*/
  40 + color: rgba(255, 255, 255, 0.89);
40 line-height: 20px; 41 line-height: 20px;
41 font-size: 14px; 42 font-size: 14px;
42 } 43 }
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </head> 10 </head>
11 <body> 11 <body>
12 <div class="outlinediv" style="height: 666px"> 12 <div class="outlinediv" style="height: 666px">
13 - <span>湖州灾备一机房平面图</span> 13 +<!-- <span>湖州灾备一机房平面图</span>-->
14 <div class="huzhouone-topcabinet"> 14 <div class="huzhouone-topcabinet">
15 <table> 15 <table>
16 <tr> 16 <tr>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 </head> 15 </head>
16 <body> 16 <body>
17 <div class="outlinediv" > 17 <div class="outlinediv" >
18 - <span>湖州灾备三机房平面图</span> 18 +<!-- <span>湖州灾备三机房平面图</span>-->
19 <div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px"> 19 <div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
20 <table> 20 <table>
21 <tr> 21 <tr>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 </head> 15 </head>
16 <body> 16 <body>
17 <div class="outlinediv" > 17 <div class="outlinediv" >
18 - <span>湖州灾备二机房平面图</span> 18 +<!-- <span>湖州灾备二机房平面图</span>-->
19 <div class="huzhouone-topcabinet" style="margin-left: 20%"> 19 <div class="huzhouone-topcabinet" style="margin-left: 20%">
20 <table> 20 <table>
21 <tr> 21 <tr>
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </head> 10 </head>
11 <body> 11 <body>
12 <div class="outlinediv"> 12 <div class="outlinediv">
13 - <span>2号机房平面图</span> 13 +<!-- <span>2号机房平面图</span>-->
14 <div class="xiaoshansecond-topcabinet"> 14 <div class="xiaoshansecond-topcabinet">
15 <table> 15 <table>
16 <tr> 16 <tr>
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </head> 8 </head>
9 <body> 9 <body>
10 <div class="outlinediv" style="width: 950px"> 10 <div class="outlinediv" style="width: 950px">
11 - <span>7号机房平面图</span> 11 +<!-- <span>7号机房平面图</span>-->
12 <div style="width: 100%;height: 100%;display: inline-flex"> 12 <div style="width: 100%;height: 100%;display: inline-flex">
13 <div class="xiaoshanseven-leftcabinet"> 13 <div class="xiaoshanseven-leftcabinet">
14 <table> 14 <table>
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td> 74 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>
75 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E5</span></a></td> 75 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E5</span></a></td>
76 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E6</span></a></td> 76 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E6</span></a></td>
77 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td> 77 + <td><a href="/h5/machineroomDetail/Details.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>
78 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E8</span></a></td> 78 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E8</span></a></td>
79 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E9</span></a></td> 79 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E9</span></a></td>
80 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a> 80 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a>
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </head> 10 </head>
11 <body> 11 <body>
12 <div class="outlinediv"> 12 <div class="outlinediv">
13 - <span>3号机房平面图</span> 13 +<!-- <span>3号机房平面图</span>-->
14 <div class="xiaoshanthird-topcabinet"> 14 <div class="xiaoshanthird-topcabinet">
15 <table> 15 <table>
16 <tr> 16 <tr>
@@ -25,8 +25,8 @@ @@ -25,8 +25,8 @@
25 <td><img/></td> 25 <td><img/></td>
26 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td> 26 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>
27 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td> 27 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>
28 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>  
29 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td> 28 + <td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>
  29 + <td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>
30 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td> 30 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>
31 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td> 31 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>
32 </tr> 32 </tr>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/Details.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 +<div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 +
  21 + <!-- 第一个物理服务器 -->
  22 + <div class='serve img-serve-8'>
  23 + <div class='img-serve' >
  24 +
  25 + <img src="img/icon-state.png" alt="" class='state'>
  26 + <div class='img-serve-text'>物理服务器</div>
  27 + <div class='lamp'>
  28 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  29 + <div class='img-lamp'>
  30 + <img src="img/nocolor.png" alt="">
  31 + <img src="img/nocolor.png" alt="">
  32 + <img src="img/nocolor.png" alt="">
  33 + <img src="img/greenColor.png" alt="">
  34 + </div>
  35 + </div>
  36 +
  37 + </div>
  38 + </div>
  39 +
  40 +
  41 + </div>
  42 +
  43 +
  44 + </div>
  45 +
  46 +
  47 +
  48 + <!-- 右侧机柜详细信息 -->
  49 + <div class='info'>
  50 +
  51 + <!-- 机柜信息 -->
  52 + <div class='info-top'>
  53 + <div class='info-contain'>
  54 + <div class='info-text'>机柜信息</div>
  55 + <div class='info-text-bot'>
  56 + <p>机 房：萧山三号机房</p>
  57 + <p>机柜编号：E12</p>
  58 + <p>机柜容量：8U</p>
  59 + <p>设备数量：1台</p>
  60 + <p>告警量：无告警</p>
  61 + </div>
  62 + </div>
  63 + </div>
  64 +
  65 + <!-- 设备信息 -->
  66 + <div class='info-bottom' id="info-bottom">
  67 + <div class='info-contain'>
  68 + <div class='info-text'>设备信息</div>
  69 + <div class='info-text-bot'>
  70 + <p>资源名称：管理决策二包(数据集市39)</p>
  71 + <p>品 牌：浪潮</p>
  72 + <p>型 号：TS860</p>
  73 + <p>序 列 号：216365930</p>
  74 + <p>业 务 IP：80.12.73.39</p>
  75 + <p>用 途：管理决策二包使用</p>
  76 + </div>
  77 + </div>
  78 + </div>
  79 +
  80 +
  81 + </div>
  82 +
  83 +
  84 +</div>
  85 +
  86 +</body>
  87 +
  88 +</html>
  89 +<script>
  90 + var eleInfo=document.getElementsByClassName('serve');
  91 + eleInfo[0].onclick = function() {
  92 + var eleBottom=document.getElementById("info-bottom")
  93 + eleBottom.setAttribute('style','display:block')
  94 + }
  95 +</script>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/Details.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 +<div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 +
  21 + <!-- 第一个物理服务器 -->
  22 + <div class='serve img-serve-8'>
  23 + <div class='img-serve' >
  24 + <div class="server-flex">
  25 + <img src="img/icon-state.png" alt="" class='state'>
  26 + <div class='img-serve-text'>物理服务器</div>
  27 + </div>
  28 +
  29 +
  30 + <div class='lamp'>
  31 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  32 + <div class='img-lamp'>
  33 + <img src="img/nocolor.png" alt="">
  34 + <img src="img/nocolor.png" alt="">
  35 + <img src="img/nocolor.png" alt="">
  36 + <img src="img/greenColor.png" alt="">
  37 + </div>
  38 + </div>
  39 +
  40 + </div>
  41 + </div>
  42 +
  43 +
  44 + </div>
  45 +
  46 +
  47 + </div>
  48 +
  49 +
  50 +
  51 + <!-- 右侧机柜详细信息 -->
  52 + <div class='info'>
  53 +
  54 + <!-- 机柜信息 -->
  55 + <div class='info-top'>
  56 + <div class='info-contain'>
  57 + <div class='info-text'>机柜信息</div>
  58 + <div class='info-text-bot'>
  59 + <p>机 房：萧山三号机房</p>
  60 + <p>机柜编号：E13</p>
  61 + <p>机柜容量：8U</p>
  62 + <p>设备数量：1台</p>
  63 + <p>告警量：无告警</p>
  64 + </div>
  65 + </div>
  66 + </div>
  67 +
  68 + <!-- 设备信息 -->
  69 + <div class='info-bottom' id="info-bottom">
  70 + <div class='info-contain'>
  71 + <div class='info-text'>设备信息</div>
  72 + <div class='info-text-bot'>
  73 + <p>资源名称：管理决策二包(数据集市38)</p>
  74 + <p>品 牌：浪潮</p>
  75 + <p>型 号：TS860</p>
  76 + <p>序 列 号：216365928</p>
  77 + <p>业 务 IP：80.12.73.38</p>
  78 + <p>用 途：管理决策二包使用</p>
  79 + </div>
  80 + </div>
  81 + </div>
  82 +
  83 +
  84 + </div>
  85 +
  86 +
  87 +</div>
  88 +
  89 +</body>
  90 +
  91 +</html>
  92 +<script>
  93 + var eleInfo=document.getElementsByClassName('serve');
  94 + eleInfo[0].onclick = function() {
  95 + var eleBottom=document.getElementById("info-bottom")
  96 + eleBottom.setAttribute('style','display:block')
  97 + }
  98 +</script>
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
@@ -10,6 +10,8 @@ li{ @@ -10,6 +10,8 @@ li{
10 10
11 .all{ 11 .all{
12 display:flex; 12 display:flex;
  13 + justify-content: space-between;
  14 + overflow: hidden;
13 } 15 }
14 16
15 17
@@ -17,10 +19,10 @@ li{ @@ -17,10 +19,10 @@ li{
17 19
18 .contain{ 20 .contain{
19 21
20 - width:400px; 22 + width:413px;
21 height:710px; 23 height:710px;
22 - margin-left:15%;  
23 - margin-top:5%; 24 + /*margin-left:3%;*/
  25 + /*margin-top:5%;*/
24 /* background-color: red; */ 26 /* background-color: red; */
25 background-image: url(../img/img-no-machine.png); 27 background-image: url(../img/img-no-machine.png);
26 background-size: 100%; 28 background-size: 100%;
@@ -30,14 +32,15 @@ li{ @@ -30,14 +32,15 @@ li{
30 } 32 }
31 33
32 .contain-server{ 34 .contain-server{
33 - position: absolute;  
34 - width:365px;  
35 - height:40%;  
36 - margin-left:18px;  
37 - bottom:7%; 35 + /*position: absolute;*/
  36 + /*width:365px;*/
  37 + /*height:40%;*/
  38 + /*margin-left:18px;*/
  39 + /*bottom:7%; */
38 display: flex; 40 display: flex;
39 justify-content: space-between; 41 justify-content: space-between;
40 flex-direction:column; 42 flex-direction:column;
  43 + align-items: center;
41 /* background-color: red; */ 44 /* background-color: red; */
42 45
43 } 46 }
@@ -53,22 +56,37 @@ li{ @@ -53,22 +56,37 @@ li{
53 56
54 57
55 } 58 }
  59 +.img-serve-8{
  60 + background-image: url(../img/img-8Uservice.png);
  61 + height:127px;
  62 + width:383px;
  63 + margin-bottom: 10px;
  64 +
  65 +}
56 .img-serve{ 66 .img-serve{
57 67
58 - width:340px; 68 + /*width:340px;
59 height:50px; 69 height:50px;
60 - margin:12px auto; 70 + margin:12px auto;*/
61 display: flex; 71 display: flex;
  72 + justify-content: space-around;
  73 + align-items: center;
  74 + height: 100%;
62 75
63 } 76 }
64 77
65 .lamp{ 78 .lamp{
66 display:flex; 79 display:flex;
  80 + width:58%;
67 } 81 }
68 82
69 - 83 +.server-flex{
  84 + display: flex;
  85 + justify-content: space-around;
  86 + width:42%;
  87 +}
70 .img-lamp{ 88 .img-lamp{
71 - margin-left:15px; 89 + /*margin-left:15px;*/
72 margin-top:10px 90 margin-top:10px
73 } 91 }
74 92
@@ -83,7 +101,7 @@ li{ @@ -83,7 +101,7 @@ li{
83 .img-serve-text{ 101 .img-serve-text{
84 color:#fff; 102 color:#fff;
85 line-height: 50px; 103 line-height: 50px;
86 - margin-left:10px; 104 + /*margin-left:10px;*/
87 } 105 }
88 106
89 107
@@ -103,26 +121,33 @@ li{ @@ -103,26 +121,33 @@ li{
103 .info{ 121 .info{
104 width:500px; 122 width:500px;
105 height:700px; 123 height:700px;
106 - margin-left:8%;  
107 - margin-top:5%; 124 + margin-right:8%;
  125 + /*margin-top:5%;*/
108 /* background-color: red; */ 126 /* background-color: red; */
  127 + display: flex;
  128 + flex-flow: column;
  129 + justify-content: center;
109 130
110 } 131 }
111 132
112 133
113 .info-top{ 134 .info-top{
114 height:340px; 135 height:340px;
115 - margin-top:-10px; 136 + /*margin-top:-10px;*/
116 background-image: url(../img/img-machineInfo-bg.png); 137 background-image: url(../img/img-machineInfo-bg.png);
117 138
118 } 139 }
119 140
120 .info-bottom{ 141 .info-bottom{
121 height:340px; 142 height:340px;
122 - margin-top:10px; 143 + margin-top:20px;
123 background-image: url(../img/img-deviceInfo-bg.png); 144 background-image: url(../img/img-deviceInfo-bg.png);
124 } 145 }
125 - 146 +.contain{
  147 + display: flex;
  148 + justify-content: center;
  149 + align-items: end;
  150 +}
126 .info-contain{ 151 .info-contain{
127 width:90%; 152 width:90%;
128 display:inline-block; 153 display:inline-block;
@@ -149,3 +174,25 @@ li{ @@ -149,3 +174,25 @@ li{
149 color:#fff 174 color:#fff
150 /* background-color: rgb(93, 15, 196); */ 175 /* background-color: rgb(93, 15, 196); */
151 } 176 }
  177 +.img-serve{
  178 + cursor: pointer;
  179 +}
  180 +.info-bottom{
  181 + display:none;
  182 +}
  183 +body::-webkit-scrollbar{
  184 + width:15px;
  185 +}
  186 +/* 垂直滚动条的滑动块 */
  187 +body::-webkit-scrollbar-thumb:vertical {
  188 + border-radius: 4px;
  189 + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  190 + background-color:#169db2;
  191 +}
  192 +/*修改滚动条的下面的样式*/
  193 +body::-webkit-scrollbar-track{
  194 + background-color:#05235c;
  195 + -webkit-borderd-radius:2em;
  196 + -moz-borderd-radius:2em;
  197 + borderd-radius:2em;
  198 +}
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
1 -<title>故障诊断书</title> 1 +<title>故障诊断配置</title>
2 <iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/> 2 <iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
  1 +<title>故障管理</title>
  2 +<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
@@ -83,3 +83,28 @@ @@ -83,3 +83,28 @@
83 .imgDiv-video{ 83 .imgDiv-video{
84 width: 24px; 84 width: 24px;
85 } 85 }
  86 +.dataCenter-container .el-dialog{
  87 + background-image: url("/h5/machineroom/img/img-beijing-dp.png");
  88 +}
  89 +.dataCenter-container .el-dialog__title{
  90 + color:#FFFFFF;
  91 +}
  92 +.dataCenter-container .machine-room .el-tabs__item{
  93 + color:#FFFFFF;
  94 +}
  95 +.dataCenter-container .machine-room .el-tabs__item:hover,.dataCenter-container .machine-room .el-tabs__item.is-active{
  96 + color:#3B91FF;
  97 +
  98 +}
  99 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  100 + border-bottom-color: #0b122c;
  101 +}
  102 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item{
  103 + border-left-color: #00ccff;
  104 +}
  105 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header{
  106 + border-bottom-color: #00ccff;;
  107 +}
  108 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
  109 + border-color: #00ccff;
  110 +}
@@ -58,7 +58,9 @@ export default { @@ -58,7 +58,9 @@ export default {
58 bottom: '1%', 58 bottom: '1%',
59 containLabel: true, 59 containLabel: true,
60 }, 60 },
61 - tooltip: {}, 61 + tooltip: {
  62 + trigger: 'axis'
  63 + },
62 legend: props.legend, 64 legend: props.legend,
63 xAxis: { 65 xAxis: {
64 data: props.xAxis 66 data: props.xAxis
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 </el-button> 31 </el-button>
32 <template #dropdown> 32 <template #dropdown>
33 <el-dropdown-menu> 33 <el-dropdown-menu>
34 - <el-dropdown-item v-for="item in frequencyArr" 34 + <el-dropdown-item v-for="item in frequencyArr" @click="getChartData()"
35 :key="item.ddicId" 35 :key="item.ddicId"
36 :command="{value:item.ddicCode,label:item.ddicName,flag:1}"> 36 :command="{value:item.ddicCode,label:item.ddicName,flag:1}">
37 <el-radio v-model="form.scene.frequency" :label="item.ddicCode">{{item.ddicName}} 37 <el-radio v-model="form.scene.frequency" :label="item.ddicCode">{{item.ddicName}}
@@ -52,12 +52,18 @@ @@ -52,12 +52,18 @@
52 <el-row :gutter="5"> 52 <el-row :gutter="5">
53 <el-col :span="4"> 53 <el-col :span="4">
54 <div style="display: flex;flex-wrap: wrap;width: 100%;padding-left: 15px;"> 54 <div style="display: flex;flex-wrap: wrap;width: 100%;padding-left: 15px;">
55 - <el-dropdown>  
56 - <el-icon class="el-icon--right"> 55 + <!--<el-dropdown>
  56 + <el-icon class="el-icon&#45;&#45;right">
57 <arrow-down/> 57 <arrow-down/>
58 </el-icon> 58 </el-icon>
59 <cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/> 59 <cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
60 - </el-dropdown> 60 + </el-dropdown>-->
  61 +
  62 + <el-select v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标" style="margin-top: 10px">
  63 + <el-option
  64 + v-for="item in busTypeList"
  65 + :label="item.busTypeName" :value="item.busId"></el-option>
  66 + </el-select>
61 67
62 <el-dropdown> 68 <el-dropdown>
63 <el-icon class="el-icon--right"> 69 <el-icon class="el-icon--right">
@@ -66,12 +72,18 @@ @@ -66,12 +72,18 @@
66 <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/> 72 <cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
67 </el-dropdown> 73 </el-dropdown>
68 74
69 - <el-dropdown>  
70 - <el-icon class="el-icon--right"> 75 + <!--<el-dropdown>
  76 + <el-icon class="el-icon&#45;&#45;right">
71 <arrow-down/> 77 <arrow-down/>
72 </el-icon> 78 </el-icon>
73 <cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/> 79 <cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
74 - </el-dropdown> 80 + </el-dropdown>-->
  81 +
  82 + <el-select v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标" style="margin-top: 10px">
  83 + <el-option
  84 + v-for="item in kpiList"
  85 + :label="item.kpiName" :value="item.kpiId"></el-option>
  86 + </el-select>
75 87
76 <el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/> 88 <el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
77 89
@@ -123,13 +123,13 @@ export default { @@ -123,13 +123,13 @@ export default {
123 ]); 123 ]);
124 124
125 125
126 - var id = proxy.$global.getQueryVariable('configId'); 126 + var id = proxy.$global.getQueryVariable('configId') ;
127 127
128 let resTypeArr = Vue.ref([]); 128 let resTypeArr = Vue.ref([]);
129 let kpiTypeArr = Vue.ref([]); 129 let kpiTypeArr = Vue.ref([]);
130 let busTypeArr = Vue.ref([]); 130 let busTypeArr = Vue.ref([]);
131 let keyWords = Vue.ref(''); 131 let keyWords = Vue.ref('');
132 - let config = Vue.ref(id); 132 + let config = Vue.ref(id == false ? null : id);
133 let lineChart = Vue.ref({ 133 let lineChart = Vue.ref({
134 legend: { 134 legend: {
135 data: [] 135 data: []
@@ -190,20 +190,22 @@ export default { @@ -190,20 +190,22 @@ export default {
190 } 190 }
191 191
192 // 查询参数 192 // 查询参数
193 - let params = { 193 + let getParams = () =>{
  194 + return {
194 keyWords: keyWords.value, 195 keyWords: keyWords.value,
195 resType: resTypeArr.value.join(','), 196 resType: resTypeArr.value.join(','),
196 kpiType: kpiTypeArr.value.join(','), 197 kpiType: kpiTypeArr.value.join(','),
197 bizType: busTypeArr.value.join(','), 198 bizType: busTypeArr.value.join(','),
198 configId: config.value 199 configId: config.value
199 } 200 }
  201 + }
200 202
201 let loadFirstList = (reload) => { 203 let loadFirstList = (reload) => {
202 - if (!reload && tabFirstList.value.length > 0) {  
203 - return false;  
204 - } 204 + // if (!reload && tabFirstList.value.length > 0) {
  205 + // return false;
  206 + // }
205 207
206 - proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) { 208 + proxy.$http.get(`/api-web/ContrastAnalysis/added`, getParams(), function (res) {
207 if (res && res.data) { 209 if (res && res.data) {
208 tabFirstList.value = res.data; 210 tabFirstList.value = res.data;
209 } 211 }
@@ -211,10 +213,10 @@ export default { @@ -211,10 +213,10 @@ export default {
211 } 213 }
212 214
213 let loadSecondList = (reload) => { 215 let loadSecondList = (reload) => {
214 - if (!reload && tabSecondList.value.length > 0) {  
215 - return false;  
216 - }  
217 - proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) { 216 + // if (!reload && tabSecondList.value.length > 0) {
  217 + // return false;
  218 + // }
  219 + proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, getParams(), function (res) {
218 if (res && res.data) { 220 if (res && res.data) {
219 tabSecondList.value = res.data; 221 tabSecondList.value = res.data;
220 } 222 }
@@ -252,6 +254,9 @@ export default { @@ -252,6 +254,9 @@ export default {
252 let timeRangeChange = (item) => { 254 let timeRangeChange = (item) => {
253 let code = item.ddicCode; 255 let code = item.ddicCode;
254 loadFrequency(code); 256 loadFrequency(code);
  257 +
  258 + // 加载echar
  259 + getChartData();
255 } 260 }
256 261
257 let addRes = (row, index) => { 262 let addRes = (row, index) => {
@@ -279,6 +284,14 @@ export default { @@ -279,6 +284,14 @@ export default {
279 }catch (e) { 284 }catch (e) {
280 timeScope = form.value.scene.timeScope.replace("time_scope_", "") 285 timeScope = form.value.scene.timeScope.replace("time_scope_", "")
281 } 286 }
  287 + let frequency = form.value.scene.frequency;
  288 + try {
  289 + let arr = frequency.split('_');
  290 + frequency = arr[arr.length - 1];
  291 + }catch (e) {
  292 +
  293 + }
  294 +
282 if (timeScope == '') { 295 if (timeScope == '') {
283 proxy.$global.showMsg("请选择时间范围！", "warning"); 296 proxy.$global.showMsg("请选择时间范围！", "warning");
284 return; 297 return;
@@ -294,7 +307,7 @@ export default { @@ -294,7 +307,7 @@ export default {
294 307
295 let p = { 308 let p = {
296 timeScope: timeScope, 309 timeScope: timeScope,
297 - frequency: form.value.scene.frequency, 310 + frequency: frequency,
298 resource: resList, 311 resource: resList,
299 type : 'avg' 312 type : 'avg'
300 } 313 }
@@ -459,9 +472,37 @@ export default { @@ -459,9 +472,37 @@ export default {
459 }); 472 });
460 } 473 }
461 474
  475 + let resTypeList = Vue.ref([]);
  476 + let kpiList = Vue.ref([]);
  477 + let busTypeList = Vue.ref([]);
  478 + let init = () =>{
  479 + /*
  480 + proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) {
  481 + if (res && res.data) {
  482 + resTypeList.value = res.data;
  483 + }
  484 + })
  485 + */
  486 +
  487 + proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
  488 + if (res && res.data) {
  489 + kpiList.value = res.data;
  490 + }
  491 + })
  492 +
  493 + proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
  494 + if (res && res.data) {
  495 + busTypeList.value = res.data;
  496 + }
  497 + })
  498 + }
  499 +
462 500
463 // 挂载完 501 // 挂载完
464 Vue.onMounted(() => { 502 Vue.onMounted(() => {
  503 +
  504 + init();
  505 +
465 if(!id){ 506 if(!id){
466 activeName.value = 'second'; 507 activeName.value = 'second';
467 } 508 }
@@ -481,6 +522,10 @@ export default { @@ -481,6 +522,10 @@ export default {
481 522
482 523
483 return { 524 return {
  525 + resTypeList,
  526 + kpiList,
  527 + busTypeList,
  528 +
484 height, 529 height,
485 lineChart, 530 lineChart,
486 form, 531 form,
@@ -495,7 +540,11 @@ export default { @@ -495,7 +540,11 @@ export default {
495 getResType, 540 getResType,
496 getKpiType, 541 getKpiType,
497 getBizType, 542 getBizType,
  543 +
498 keyWords, 544 keyWords,
  545 + resTypeArr,
  546 + kpiTypeArr,
  547 + busTypeArr,
499 548
500 loadFirstList, 549 loadFirstList,
501 loadSecondList, 550 loadSecondList,
@@ -514,7 +563,8 @@ export default { @@ -514,7 +563,8 @@ export default {
514 dialogFormVisible, 563 dialogFormVisible,
515 showDialogForm, 564 showDialogForm,
516 saveAnalysis, 565 saveAnalysis,
517 - parentList 566 + parentList,
  567 + getChartData
518 } 568 }
519 } 569 }
520 } 570 }
@@ -64,9 +64,11 @@ export default { @@ -64,9 +64,11 @@ export default {
64 } 64 }
65 65
66 let frequency = v.node.frequency; 66 let frequency = v.node.frequency;
67 - if(time){ 67 + try {
68 let arr = frequency.split('_'); 68 let arr = frequency.split('_');
69 frequency = arr[arr.length - 1]; 69 frequency = arr[arr.length - 1];
  70 + }catch (e) {
  71 +
70 } 72 }
71 73
72 let p = { 74 let p = {
1 -<iframe v-if="src" style="width:1100px;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe> 1 +<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
@@ -11,7 +11,7 @@ export default { @@ -11,7 +11,7 @@ export default {
11 titleFontSize:20, 11 titleFontSize:20,
12 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
13 apiUrl:'/api-web/sxview/getBusinessAvailability', 13 apiUrl:'/api-web/sxview/getBusinessAvailability',
14 - kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 14 + kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
15 busId: '53bebbd79f384f619513b50666ea1d48', 15 busId: '53bebbd79f384f619513b50666ea1d48',
16 performanceData:'', 16 performanceData:'',
17 xAxisData:'', 17 xAxisData:'',
@@ -41,17 +41,19 @@ export default { @@ -41,17 +41,19 @@ export default {
41 41
42 // 半透明的颜色值 42 // 半透明的颜色值
43 const colorArr1 = [ 43 const colorArr1 = [
44 - 'rgba(255,0,255, 0.8)',  
45 'rgba(23,212,152, 0.8)', 44 'rgba(23,212,152, 0.8)',
46 'rgba(253,152,58, 0.8)', 45 'rgba(253,152,58, 0.8)',
47 - 'rgba(255,113,66, 0.8)' 46 + 'rgba(255,238,0, 0.8)',
  47 + 'rgba(255,113,66, 0.8)',
  48 + 'rgba(255,0,255, 0.8)',
48 ] 49 ]
49 // 全透明的颜色值 50 // 全透明的颜色值
50 const colorArr2 = [ 51 const colorArr2 = [
51 - 'rgba(255,0,255, 0)',  
52 'rgba(23,212,152, 0)', 52 'rgba(23,212,152, 0)',
53 'rgba(253,152,58, 0)', 53 'rgba(253,152,58, 0)',
54 - 'rgba(255,113,66, 0)' 54 + 'rgba(255,238,0, 0)',
  55 + 'rgba(255,113,66, 0)',
  56 + 'rgba(255,0,255, 0)',
55 ] 57 ]
56 // 挂载完 58 // 挂载完
57 Vue.onMounted(() => { 59 Vue.onMounted(() => {
@@ -73,7 +75,7 @@ export default { @@ -73,7 +75,7 @@ export default {
73 let xAxisData=Vue.ref([]); 75 let xAxisData=Vue.ref([]);
74 let yAxisData=Vue.ref([]); 76 let yAxisData=Vue.ref([]);
75 let mapData={ 77 let mapData={
76 - legend:[ "可用性","成功率","响应率","业务告警量"], 78 + legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
77 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45", 79 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
78 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45", 80 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
79 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45", 81 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -126,6 +128,10 @@ export default { @@ -126,6 +128,10 @@ export default {
126 }else{ 128 }else{
127 i=1; 129 i=1;
128 } 130 }
  131 + let areaStyle=0;
  132 + if(i==2){
  133 + areaStyle=1
  134 + }
129 ySeriesCommon.push( 135 ySeriesCommon.push(
130 { 136 {
131 name:item, 137 name:item,
@@ -148,7 +154,7 @@ export default { @@ -148,7 +154,7 @@ export default {
148 areaStyle: { 154 areaStyle: {
149 // color:'rgba(151,213,244,0.4)', 155 // color:'rgba(151,213,244,0.4)',
150 normal:{ 156 normal:{
151 - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变 157 + color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
152 offset: 0, 158 offset: 0,
153 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明 159 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
154 }, { 160 }, {
@@ -226,7 +232,7 @@ export default { @@ -226,7 +232,7 @@ export default {
226 xAxis: { 232 xAxis: {
227 type: 'category', 233 type: 'category',
228 boundaryGap: false, 234 boundaryGap: false,
229 - data: xAxisData, 235 + data: proxy.xAxisData,
230 236
231 axisLine:{ 237 axisLine:{
232 show:false,//是否显示坐标线 238 show:false,//是否显示坐标线
@@ -32,7 +32,8 @@ @@ -32,7 +32,8 @@
32 :showBorder="true" :currentPage="currentPage" :total="total" :loading="false" 32 :showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
33 :showPage="true" :height="(height - 95)" :maxWidth="max"> 33 :showPage="true" :height="(height - 95)" :maxWidth="max">
34 <template #default="{row,prop,column}"> 34 <template #default="{row,prop,column}">
35 - <a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop].value == undefined ? '' : row[prop].value }}</a> 35 +<!-- <a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop].value == undefined ? '' : row[prop].value }}</a>-->
  36 + <a href="javascript:void(0)" v-if="prop == 'aaa' || prop == 'bbbbb'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop].value == undefined ? '' : row[prop].value }}</a>
36 37
37 <component v-else-if="row[prop] && row[prop].props && row[prop].props.colComponents " v-bind:is="row[prop].props.colComponents" 38 <component v-else-if="row[prop] && row[prop].props && row[prop].props.colComponents " v-bind:is="row[prop].props.colComponents"
38 :resId="row.resId" 39 :resId="row.resId"
@@ -59,7 +60,7 @@ @@ -59,7 +60,7 @@
59 </div> 60 </div>
60 <div v-if="cellDetail.prop == 'resPositon'" @click="openCabinet(false)" style="background-image: url('/vue3/src/assets/images/res/img02.jpg');height: 600px;background-repeat: no-repeat;background-position: center;background-size: 80%;"> 61 <div v-if="cellDetail.prop == 'resPositon'" @click="openCabinet(false)" style="background-image: url('/vue3/src/assets/images/res/img02.jpg');height: 600px;background-repeat: no-repeat;background-position: center;background-size: 80%;">
61 <div style="font-weight: bold;font-size: 20px;"> 62 <div style="font-weight: bold;font-size: 20px;">
62 - {{cellDetail.row[cellDetail.prop]}}布局图 63 + <!--{{cellDetail.row[cellDetail.prop]}}布局图-->
63 </div> 64 </div>
64 </div> 65 </div>
65 </template> 66 </template>
  1 +export default {
  2 + name: 'availabilityLine',
  3 + template: '',
  4 + props:['busId','kpiIds'],
  5 + components: {
  6 + 'LineChart': Vue.defineAsyncComponent(
  7 + () => myImport('views/zjdaping/components/lineChart/index')
  8 + )
  9 + },
  10 + data(){
  11 + return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/sxview/getBusinessAvailability',
  14 + // kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
  15 + // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
  16 + // busId:'',
  17 + performanceData:'',
  18 + xAxisData:'',
  19 + yAxisData:'',
  20 + optionData:'',
  21 + ySeriesCommon:[]
  22 + }
  23 + },
  24 + setup(props, {attrs, slots, emit}) {
  25 + const {proxy} = Vue.getCurrentInstance();
  26 + const xAxisData=Vue.ref();
  27 + const yAxisData=Vue.ref([]);
  28 + const legendData=Vue.ref([]);
  29 + const ySeriesCommon=Vue.ref([]);
  30 +
  31 + // 半透明的颜色值
  32 + const colorArr1 = [
  33 + 'rgba(23,212,152, 0.8)',
  34 + 'rgba(253,152,58, 0.8)',
  35 + 'rgba(255,238,0, 0.8)',
  36 + 'rgba(255,113,66, 0.8)',
  37 + 'rgba(255,0,255, 0.8)',
  38 + ]
  39 + // 全透明的颜色值
  40 + const colorArr2 = [
  41 + 'rgba(23,212,152, 0)',
  42 + 'rgba(253,152,58, 0)',
  43 + 'rgba(255,238,0, 0)',
  44 + 'rgba(255,113,66, 0)',
  45 + 'rgba(255,0,255, 0)',
  46 + ]
  47 + // 挂载完
  48 + Vue.onMounted(() => {
  49 + proxy.getData();
  50 +
  51 + })
  52 + const getData=()=>{
  53 + let params = {
  54 + kpiIds: props.kpiIds,
  55 + busId: props.busId,
  56 + startTime:'',
  57 + endTime:'',
  58 + access_token:localStorage.getItem('access_token')
  59 + };
  60 + $.get(proxy.domainName +proxy.apiUrl+'?access_token='+localStorage.getItem('access_token'),params,function (res) {
  61 + console.log("yewu")
  62 + const data = res;
  63 + let legendData=Vue.ref([]);
  64 + let xAxisData=Vue.ref([]);
  65 + let yAxisData=Vue.ref([]);
  66 + let mapData={
  67 + legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
  68 + x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
  69 + "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
  70 + "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
  71 + "22:00","22:15","22:30", "22:45","23:00","23:15","23:30","23:45","00:00","00:15","00:30","00:45", "01:00","01:15","01:30","01:45",
  72 + "02:00","02:15","02:30", "02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45", "05:00","05:15","05:30","05:45",
  73 + "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45",
  74 + "10:00"
  75 + ],
  76 + y:[[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
  77 + ]
  78 + }
  79 + if (data ) {
  80 + if(data.map){
  81 + let resData=data.map;
  82 + if(!resData.x || resData.x.length==0){
  83 + resData=mapData;
  84 + }
  85 + xAxisData=resData.x;
  86 + yAxisData=resData.y;
  87 + legendData=resData.legend;
  88 +
  89 + }else{
  90 + xAxisData=mapData.x;
  91 + yAxisData=mapData.y;
  92 + legendData=mapData.legend;
  93 + }
  94 + proxy.legendData= legendData;
  95 + proxy.xAxisData=xAxisData;
  96 + proxy.yAxisData=yAxisData;
  97 + proxy.optionInit();
  98 +
  99 + }
  100 +
  101 + })
  102 + // proxy.optionInit();
  103 +
  104 + }
  105 + const optionInit=()=>{
  106 +
  107 + let data3=proxy.yAxisData[0];
  108 + let data4=proxy.yAxisData[3];
  109 + let min2=proxy.calMin([data3,data4]);
  110 + let max2=proxy.calMax([data3,data4]);
  111 + let ySeriesCommon=[];
  112 + proxy.legendData.map((item,index)=>{
  113 + let i=0;
  114 + if(index%2==0 ||index%3==0){
  115 + i=0;
  116 + }else{
  117 + i=1;
  118 + }
  119 + let areaStyle=0;
  120 + if(i==2){
  121 + areaStyle=1
  122 + }
  123 + ySeriesCommon.push(
  124 + {
  125 + name:item,
  126 + type: 'line',
  127 + smooth:true,
  128 + // stack: 'Total',
  129 + show:false,
  130 + data:proxy.yAxisData[index],
  131 + yAxisIndex:i,
  132 + showSymbol:false,
  133 + itemStyle : {
  134 + normal : {
  135 + color:colorArr1[index],//tooltip里的小圆点颜色
  136 + lineStyle:{
  137 + color:colorArr1[index],
  138 + width:1
  139 + }
  140 + }
  141 + },
  142 + areaStyle: {
  143 + // color:'rgba(151,213,244,0.4)',
  144 + normal:{
  145 + color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
  146 + offset: 0,
  147 + color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
  148 + }, {
  149 + offset: 1,
  150 + color: colorArr2[index]
  151 + }])
  152 + }
  153 +
  154 + },
  155 + },
  156 + )
  157 + })
  158 + proxy.ySeriesCommon=ySeriesCommon;
  159 +
  160 + // let xAxisDataLength=proxy.ySeriesCommon[0].length;
  161 + let xAxisData=[];
  162 + if(proxy.xAxisData){
  163 + proxy.xAxisData.map((item,index)=>{
  164 + if(index%20==0){
  165 + xAxisData.push(item)
  166 +
  167 + }
  168 + })
  169 +
  170 + }
  171 + proxy.optionData = {
  172 + title: {
  173 + text: ''
  174 + },
  175 + tooltip: {
  176 + trigger: 'axis',
  177 + backgroundColor:'rgba(50,50,50,0.7)',
  178 + borderColor:"#333",
  179 + formatter:function(params){
  180 + let str='<div>'+params[0].name+'</div>';
  181 + let unit='%';
  182 + for(let i=0;i<params.length;i++){
  183 + if(i==3){
  184 + unit=" 个"
  185 + }else{
  186 + unit="%"
  187 + }
  188 + let dataVal=0;
  189 + if(params[i].data && params[i].data!=undefined && params[i].data!='undefined') {
  190 + dataVal=params[i].data
  191 + }
  192 + str+="<div style='display:flex;justify-content: space-between'><span>"+params[i].marker+params[i].seriesName+"</span><span style='margin-left:10px;'>"+dataVal+unit+"</span></div>"
  193 + }
  194 + return str
  195 + },
  196 + textStyle:{
  197 + color:"#fff",
  198 + align:'left'
  199 + }
  200 +
  201 + },
  202 + legend: {
  203 + data: proxy.legendData,
  204 + itemHeight:0,//图例圆圈大小设置
  205 + y:'0px',
  206 + textStyle: {
  207 + color: '#ffffff',
  208 + fontsize:"12px"
  209 + }
  210 +
  211 + },
  212 + grid: {
  213 + top:'10%',
  214 + left: '3%',
  215 + right: '8%',
  216 + bottom: '20%',
  217 + containLabel: true,
  218 + },
  219 + xAxis: {
  220 + type: 'category',
  221 + boundaryGap: false,
  222 + data: proxy.xAxisData,
  223 +
  224 + axisLine:{
  225 + show:false,//是否显示坐标线
  226 + },
  227 + axisTick: {
  228 + show: false //是否显示坐标刻度
  229 + },
  230 + axisLabel:{
  231 + color:'#ffffff',
  232 + },
  233 +
  234 + },
  235 + yAxis:[
  236 + {
  237 +
  238 + type: 'value',
  239 + axisLabel: {
  240 + formatter: '{value} %'//以百分比显示
  241 + },
  242 + splitLine:{
  243 + lineStyle: {
  244 + color:'#0a1b31'
  245 + }
  246 + },
  247 + // position:'right',
  248 + min:0,
  249 + max:100,
  250 + splitNumber:10,
  251 + interval:(100-0)/10
  252 + },
  253 + {
  254 + name: '单位:个',
  255 + type: 'value',
  256 + axisLabel: {
  257 + show: true,
  258 + interval: 'right',//居中显示
  259 + },
  260 + splitLine:{
  261 + lineStyle: {
  262 + color:'#0a1b31'
  263 + }
  264 + },
  265 + min:min2,
  266 + max:max2,
  267 + splitNumber:10,
  268 + interval:(max2-min2)/10
  269 + },
  270 + ],
  271 + series: proxy.ySeriesCommon,
  272 + itemStyle:{
  273 + showSymbol:false
  274 + }
  275 + };
  276 + }
  277 + //计算最大值
  278 + const calMax=(arr)=>{
  279 + let max=0;
  280 + arr.forEach((el)=>{
  281 + el.forEach((el1)=>{
  282 + if(!(el1 === undefined || el1 === '')){
  283 + if(max<el1){
  284 + max=el1;
  285 + }
  286 + }
  287 + })
  288 + })
  289 + let maxint=Math.ceil(max/9.5);
  290 + let maxval=maxint * 10;//让显示的刻度是整数
  291 + return maxval;
  292 + }
  293 + //计算最小值
  294 + const calMin=(arr)=>{
  295 + let min=0;
  296 + arr.forEach((el)=>{
  297 + el.forEach((el1)=>{
  298 + if(!(el1 === undefined || el1 === '')){
  299 + if(min>el1){
  300 + min=el1;
  301 + }
  302 + }
  303 + })
  304 + })
  305 + let minint=Math.floor(min/10);
  306 + let minval=minint * 10;//让显示的刻度是整数
  307 + return minval;
  308 + }
  309 +
  310 +
  311 + return{
  312 + calMax,
  313 + calMin,
  314 + getData,
  315 + xAxisData,
  316 + yAxisData,
  317 + legendData,
  318 + optionInit
  319 + }
  320 + }
  321 +}
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 </el-dialog> 35 </el-dialog>
36 36
37 <!--机房布局--> 37 <!--机房布局-->
38 - <el-dialog v-model="outerVisible" :title="dialogMachineName" width="60%" @close="closeDialog"> 38 + <el-dialog v-model="outerVisible" :title="dialogMachineName" width="70%" @close="closeDialog" top="7vh">
39 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom> 39 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
40 40
41 </el-dialog> 41 </el-dialog>
@@ -32,26 +32,26 @@ export default { @@ -32,26 +32,26 @@ export default {
32 } 32 }
33 ],//机房布局html数据 33 ],//机房布局html数据
34 commandNameDataX:[ 34 commandNameDataX:[
35 - // {  
36 - // name:'萧山IDC二号机房',  
37 - // htmlName:'xiaoshansecond',  
38 - // val:'one'  
39 - // },  
40 - // {  
41 - // name:'萧山IDC三号机房',  
42 - // htmlName:'xiaoshanthird',  
43 - // val:'two'  
44 - // },  
45 - // {  
46 - // name:'萧山IDC七号机房',  
47 - // htmlName:'xiaoshanseven',  
48 - // val:'three'  
49 - // }  
50 { 35 {
51 - name:'兴议二号机房', 36 + name:'萧山IDC二号机房',
52 htmlName:'xiaoshansecond', 37 htmlName:'xiaoshansecond',
53 val:'one' 38 val:'one'
  39 + },
  40 + {
  41 + name:'萧山IDC三号机房',
  42 + htmlName:'xiaoshanthird',
  43 + val:'two'
  44 + },
  45 + {
  46 + name:'萧山IDC七号机房',
  47 + htmlName:'xiaoshanseven',
  48 + val:'three'
54 } 49 }
  50 + // {
  51 + // name:'兴议二号机房',
  52 + // htmlName:'xiaoshansecond',
  53 + // val:'one'
  54 + // }
55 ], 55 ],
56 commandName:'',//下拉选择默认显示名称 56 commandName:'',//下拉选择默认显示名称
57 htmlName:'',//机房组件名称-html名称 57 htmlName:'',//机房组件名称-html名称
@@ -21,7 +21,8 @@ export default { @@ -21,7 +21,8 @@ export default {
21 return { 21 return {
22 domainName:sessionStorage.getItem('domainName'), 22 domainName:sessionStorage.getItem('domainName'),
23 apiUrl:'/api-web/sxview/getBusinessAvailability', 23 apiUrl:'/api-web/sxview/getBusinessAvailability',
24 - kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 24 + // kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',//可用性，成功率，响应率，业务告警量
  25 + kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
25 // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd', 26 // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
26 busId:'', 27 busId:'',
27 performanceData:'', 28 performanceData:'',
@@ -46,17 +47,19 @@ export default { @@ -46,17 +47,19 @@ export default {
46 }); 47 });
47 // 半透明的颜色值 48 // 半透明的颜色值
48 const colorArr1 = [ 49 const colorArr1 = [
49 - 'rgba(255,0,255, 0.8)',  
50 'rgba(23,212,152, 0.8)', 50 'rgba(23,212,152, 0.8)',
51 'rgba(253,152,58, 0.8)', 51 'rgba(253,152,58, 0.8)',
52 - 'rgba(255,113,66, 0.8)' 52 + 'rgba(255,238,0, 0.8)',
  53 + 'rgba(255,113,66, 0.8)',
  54 + 'rgba(255,0,255, 0.8)',
53 ] 55 ]
54 // 全透明的颜色值 56 // 全透明的颜色值
55 const colorArr2 = [ 57 const colorArr2 = [
56 - 'rgba(255,0,255, 0)',  
57 'rgba(23,212,152, 0)', 58 'rgba(23,212,152, 0)',
58 'rgba(253,152,58, 0)', 59 'rgba(253,152,58, 0)',
59 - 'rgba(255,113,66, 0)' 60 + 'rgba(255,238,0, 0)',
  61 + 'rgba(255,113,66, 0)',
  62 + 'rgba(255,0,255, 0)',
60 ] 63 ]
61 // 挂载完 64 // 挂载完
62 Vue.onMounted(() => { 65 Vue.onMounted(() => {
@@ -77,7 +80,7 @@ export default { @@ -77,7 +80,7 @@ export default {
77 let xAxisData=Vue.ref([]); 80 let xAxisData=Vue.ref([]);
78 let yAxisData=Vue.ref([]); 81 let yAxisData=Vue.ref([]);
79 let mapData={ 82 let mapData={
80 - legend:[ "可用性","成功率","响应率","业务告警量"], 83 + legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
81 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45", 84 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
82 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45", 85 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
83 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45", 86 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -86,7 +89,7 @@ export default { @@ -86,7 +89,7 @@ export default {
86 "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45", 89 "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45",
87 "10:00" 90 "10:00"
88 ], 91 ],
89 - y:[[ 0,1,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0] 92 + y:[[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
90 ] 93 ]
91 } 94 }
92 if (data ) { 95 if (data ) {
@@ -129,6 +132,10 @@ export default { @@ -129,6 +132,10 @@ export default {
129 }else{ 132 }else{
130 i=1; 133 i=1;
131 } 134 }
  135 + let areaStyle=0;
  136 + if(i==2){
  137 + areaStyle=1
  138 + }
132 ySeriesCommon.push( 139 ySeriesCommon.push(
133 { 140 {
134 name:item, 141 name:item,
@@ -151,7 +158,7 @@ export default { @@ -151,7 +158,7 @@ export default {
151 areaStyle: { 158 areaStyle: {
152 // color:'rgba(151,213,244,0.4)', 159 // color:'rgba(151,213,244,0.4)',
153 normal:{ 160 normal:{
154 - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变 161 + color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
155 offset: 0, 162 offset: 0,
156 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明 163 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
157 }, { 164 }, {
@@ -221,14 +228,14 @@ export default { @@ -221,14 +228,14 @@ export default {
221 grid: { 228 grid: {
222 top:'10%', 229 top:'10%',
223 left: '3%', 230 left: '3%',
224 - right: '4%', 231 + right: '8%',
225 bottom: '20%', 232 bottom: '20%',
226 containLabel: true, 233 containLabel: true,
227 }, 234 },
228 xAxis: { 235 xAxis: {
229 type: 'category', 236 type: 'category',
230 boundaryGap: false, 237 boundaryGap: false,
231 - data: xAxisData, 238 + data: proxy.xAxisData,
232 239
233 axisLine:{ 240 axisLine:{
234 show:false,//是否显示坐标线 241 show:false,//是否显示坐标线