monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 84a91445d91e9335baf89e2ba170ca4e3196886a 2 parents 248f788e 0dbe3f1b

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

 Conflicts:
	hg-monitor-web-base/src/main/resources/static/src/controller/commonCols.js
Inline Side-by-side
Showing 31 changed files with 474 additions and 117 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'},
@@ -504,14 +505,14 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin', @@ -504,14 +505,14 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
504 field: 'resName', title: '资源名称', minWidth: 250, sort: true, 505 field: 'resName', title: '资源名称', minWidth: 250, sort: true,
505 templet: '#resindex_resName' 506 templet: '#resindex_resName'
506 }, 507 },
507 - // {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},  
508 - {field: 'resTypeName', title: '资源类型', minWidth: 140, align: 'center'},  
509 - {field: 'adminName', title: '负责人', minWidth: 140, align: 'center', sort: true},  
510 - {field: 'adminPhone', title: '负责人电话', minWidth: 140, align: 'center', sort: true},  
511 - {field: 'state', title: '资源状态', minWidth: 130, align: 'center', sort: true, templet: '#resStateTpl'},  
512 - {field: 'health', title: '健康状态', minWidth: 130, align: 'center', sort: true, templet: '#healthTpl'}, 508 + {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
  509 + {field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
  510 + {field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
  511 + {field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
  512 + {field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
  513 + {field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
513 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}, 514 {field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
514 - {field: 'linkState', title: '连接状态', align: 'center', minWidth: 130, templet: '#linkStateTpl', sort: true} 515 + {field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
515 ], 516 ],
516 "ALI_ARMS": [ 517 "ALI_ARMS": [
517 //{type: 'numbers', title: '序号', align: 'center', fixed: 'left'}, 518 //{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>
@@ -239,4 +239,4 @@ @@ -239,4 +239,4 @@
239 </div> 239 </div>
240 </div> 240 </div>
241 </body> 241 </body>
242 -</html>  
  242 +</html>
@@ -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>
@@ -68,4 +68,4 @@ @@ -68,4 +68,4 @@
68 </div> 68 </div>
69 </div> 69 </div>
70 </body> 70 </body>
71 -</html>  
  71 +</html>
@@ -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>
@@ -78,4 +78,4 @@ @@ -78,4 +78,4 @@
78 </div> 78 </div>
79 </div> 79 </div>
80 </body> 80 </body>
81 -</html>  
  81 +</html>
@@ -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>
@@ -90,4 +90,4 @@ @@ -90,4 +90,4 @@
90 </div> 90 </div>
91 </div> 91 </div>
92 </body> 92 </body>
93 -</html>  
  93 +</html>
@@ -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>
@@ -221,4 +221,4 @@ @@ -221,4 +221,4 @@
221 </div> 221 </div>
222 </div> 222 </div>
223 </body> 223 </body>
224 -</html>  
  224 +</html>
@@ -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>
@@ -112,4 +112,4 @@ @@ -112,4 +112,4 @@
112 </div> 112 </div>
113 </div> 113 </div>
114 </body> 114 </body>
115 -</html>  
  115 +</html>
  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;"/>
@@ -82,4 +82,29 @@ @@ -82,4 +82,29 @@
82 } 82 }
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 = {  
194 - keyWords: keyWords.value,  
195 - resType: resTypeArr.value.join(','),  
196 - kpiType: kpiTypeArr.value.join(','),  
197 - bizType: busTypeArr.value.join(','),  
198 - configId: config.value 193 + let getParams = () =>{
  194 + return {
  195 + keyWords: keyWords.value,
  196 + resType: resTypeArr.value.join(','),
  197 + kpiType: kpiTypeArr.value.join(','),
  198 + bizType: busTypeArr.value.join(','),
  199 + configId: config.value
  200 + }
199 } 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>
@@ -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,//是否显示坐标线