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',
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
{field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
{field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
{field: 'hostState', title: '主机状态', align: 'center', minWidth: x_110, templet: '#hostStateTpl', sort: true},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true}
],
"HUAWEI_CLOUD_CLUSTER": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
... ... @@ -504,14 +505,14 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
field: 'resName', title: '资源名称', minWidth: 250, sort: true,
templet: '#resindex_resName'
},
// {field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'resTypeName', title: '资源类型', minWidth: 140, align: 'center'},
{field: 'adminName', title: '负责人', minWidth: 140, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', minWidth: 140, align: 'center', sort: true},
{field: 'state', title: '资源状态', minWidth: 130, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', minWidth: 130, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'ip', title: 'IP地址', width: 130, align: 'center', sort: true},
{field: 'resTypeName', title: '资源类型', width: 101, align: 'center'},
{field: 'adminName', title: '负责人', width: 123, align: 'center', sort: true},
{field: 'adminPhone', title: '负责人电话', width: 118, align: 'center', sort: true},
{field: 'state', title: '资源状态', width: 98, align: 'center', sort: true, templet: '#resStateTpl'},
{field: 'health', title: '健康状态', width: 83, align: 'center', sort: true, templet: '#healthTpl'},
{field: 'lastColTime', title: '最近采集时间', width: 161, align: 'center', sort: true},
{field: 'linkState', title: '连接状态', align: 'center', minWidth: 130, templet: '#linkStateTpl', sort: true}
{field: 'linkState', title: '连接状态', align: 'center', width: 85, templet: '#linkStateTpl', sort: true}
],
"ALI_ARMS": [
//{type: 'numbers', title: '序号', align: 'center', fixed: 'left'},
... ...
... ... @@ -599,7 +599,6 @@ export default {
fileNameData.push(v.fileName)
}
})
alert(fileNameData)
let params = {
info: info.join(","),
... ...
... ... @@ -192,8 +192,17 @@ global.openCmdbAssets = (resTypeId, resId, proxy) => {
}
global.openDetail = (resId, resType, title) => {
let url = window.top.location.href.split('/#')[0] + `/#/res/resDetail/resId=${resId}/resType=${resType}/title=${title}`;
global.openBlankWindow(url);
// let url = `/#/res/resDetail/view/resId=${resId}`;
let url = window.top.location.href.split('/#')[0] + `/#/res/resDetail/view/resId=${resId}`;
if(resType){
url += '/resType=' + resType
}
if(title){
url += '/title=' + title
}
// global.openBlankWindow(url);
}
/**
... ...
... ... @@ -11,7 +11,7 @@ html
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
background-image:url("../img/img-beijing.png");
background-image:url("../img/img-beijing-dp.png");
background-repeat: no-repeat;
background-position: center;
}
... ... @@ -36,7 +36,8 @@ body
}
.outlinediv span {
color: rgba(0, 0, 0, 0.89);
/*color: rgba(0, 0, 0, 0.89);*/
color: rgba(255, 255, 255, 0.89);
line-height: 20px;
font-size: 14px;
}
... ...
... ... @@ -10,7 +10,7 @@
</head>
<body>
<div class="outlinediv" style="height: 666px">
<span>湖州灾备一机房平面图</span>
<!-- <span>湖州灾备一机房平面图</span>-->
<div class="huzhouone-topcabinet">
<table>
<tr>
... ... @@ -239,4 +239,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -15,7 +15,7 @@
</head>
<body>
<div class="outlinediv" >
<span>湖州灾备三机房平面图</span>
<!-- <span>湖州灾备三机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
<table>
<tr>
... ... @@ -68,4 +68,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -15,7 +15,7 @@
</head>
<body>
<div class="outlinediv" >
<span>湖州灾备二机房平面图</span>
<!-- <span>湖州灾备二机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 20%">
<table>
<tr>
... ... @@ -78,4 +78,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -10,7 +10,7 @@
</head>
<body>
<div class="outlinediv">
<span>2号机房平面图</span>
<!-- <span>2号机房平面图</span>-->
<div class="xiaoshansecond-topcabinet">
<table>
<tr>
... ... @@ -90,4 +90,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -8,7 +8,7 @@
</head>
<body>
<div class="outlinediv" style="width: 950px">
<span>7号机房平面图</span>
<!-- <span>7号机房平面图</span>-->
<div style="width: 100%;height: 100%;display: inline-flex">
<div class="xiaoshanseven-leftcabinet">
<table>
... ... @@ -74,7 +74,7 @@
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E5</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>
<td><a href="/h5/machineroomDetail/Details.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E8</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E9</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a>
... ... @@ -221,4 +221,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -10,7 +10,7 @@
</head>
<body>
<div class="outlinediv">
<span>3号机房平面图</span>
<!-- <span>3号机房平面图</span>-->
<div class="xiaoshanthird-topcabinet">
<table>
<tr>
... ... @@ -25,8 +25,8 @@
<td><img/></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>
<td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>
<td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>
</tr>
... ... @@ -112,4 +112,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/Details.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个物理服务器 -->
<div class='serve img-serve-8'>
<div class='img-serve' >
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info'>
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房：萧山三号机房</p>
<p>机柜编号：E12</p>
<p>机柜容量：8U</p>
<p>设备数量：1台</p>
<p>告警量：无告警</p>
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom' id="info-bottom">
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>资源名称：管理决策二包(数据集市39)</p>
<p>品 牌：浪潮</p>
<p>型 号：TS860</p>
<p>序 列 号：216365930</p>
<p>业 务 IP：80.12.73.39</p>
<p>用 途：管理决策二包使用</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var eleInfo=document.getElementsByClassName('serve');
eleInfo[0].onclick = function() {
var eleBottom=document.getElementById("info-bottom")
eleBottom.setAttribute('style','display:block')
}
</script>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/Details.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个物理服务器 -->
<div class='serve img-serve-8'>
<div class='img-serve' >
<div class="server-flex">
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info'>
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房：萧山三号机房</p>
<p>机柜编号：E13</p>
<p>机柜容量：8U</p>
<p>设备数量：1台</p>
<p>告警量：无告警</p>
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom' id="info-bottom">
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>资源名称：管理决策二包(数据集市38)</p>
<p>品 牌：浪潮</p>
<p>型 号：TS860</p>
<p>序 列 号：216365928</p>
<p>业 务 IP：80.12.73.38</p>
<p>用 途：管理决策二包使用</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var eleInfo=document.getElementsByClassName('serve');
eleInfo[0].onclick = function() {
var eleBottom=document.getElementById("info-bottom")
eleBottom.setAttribute('style','display:block')
}
</script>
\ No newline at end of file
... ...
body{
background-image: url(../img/img-bg.png);
background-image: url(../img/img-bg-1.png);
background-size: 100%;
}
... ... @@ -10,6 +10,8 @@ li{
.all{
display:flex;
justify-content: space-between;
overflow: hidden;
}
... ... @@ -17,10 +19,10 @@ li{
.contain{
width:400px;
width:413px;
height:710px;
margin-left:15%;
margin-top:5%;
/*margin-left:3%;*/
/*margin-top:5%;*/
/* background-color: red; */
background-image: url(../img/img-no-machine.png);
background-size: 100%;
... ... @@ -30,14 +32,15 @@ li{
}
.contain-server{
position: absolute;
width:365px;
height:40%;
margin-left:18px;
bottom:7%;
/*position: absolute;*/
/*width:365px;*/
/*height:40%;*/
/*margin-left:18px;*/
/*bottom:7%; */
display: flex;
justify-content: space-between;
flex-direction:column;
align-items: center;
/* background-color: red; */
}
... ... @@ -53,22 +56,37 @@ li{
}
.img-serve-8{
background-image: url(../img/img-8Uservice.png);
height:127px;
width:383px;
margin-bottom: 10px;
}
.img-serve{
width:340px;
/*width:340px;
height:50px;
margin:12px auto;
margin:12px auto;*/
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.lamp{
display:flex;
width:58%;
}
.server-flex{
display: flex;
justify-content: space-around;
width:42%;
}
.img-lamp{
margin-left:15px;
/*margin-left:15px;*/
margin-top:10px
}
... ... @@ -83,7 +101,7 @@ li{
.img-serve-text{
color:#fff;
line-height: 50px;
margin-left:10px;
/*margin-left:10px;*/
}
... ... @@ -103,26 +121,33 @@ li{
.info{
width:500px;
height:700px;
margin-left:8%;
margin-top:5%;
margin-right:8%;
/*margin-top:5%;*/
/* background-color: red; */
display: flex;
flex-flow: column;
justify-content: center;
}
.info-top{
height:340px;
margin-top:-10px;
/*margin-top:-10px;*/
background-image: url(../img/img-machineInfo-bg.png);
}
.info-bottom{
height:340px;
margin-top:10px;
margin-top:20px;
background-image: url(../img/img-deviceInfo-bg.png);
}
.contain{
display: flex;
justify-content: center;
align-items: end;
}
.info-contain{
width:90%;
display:inline-block;
... ... @@ -149,3 +174,25 @@ li{
color:#fff
/* background-color: rgb(93, 15, 196); */
}
.img-serve{
cursor: pointer;
}
.info-bottom{
display:none;
}
body::-webkit-scrollbar{
width:15px;
}
/* 垂直滚动条的滑动块 */
body::-webkit-scrollbar-thumb:vertical {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:#169db2;
}
/*修改滚动条的下面的样式*/
body::-webkit-scrollbar-track{
background-color:#05235c;
-webkit-borderd-radius:2em;
-moz-borderd-radius:2em;
borderd-radius:2em;
}
\ No newline at end of file
... ...
body{
background-image: url(../img/img-bg.png);
background-image: url(../img/img-bg-1.png);
background-size: 100%;
}
... ...
body{
background-image: url(../img/img-bg.png);
background-image: url(../img/img-bg-1.png);
background-size: 100%;
}
... ...
<title>故障诊断书</title>
<title>故障诊断配置</title>
<iframe src="/vue3/index.html#/fault/index" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
<title>故障管理</title>
<iframe src="/vue3/index.html#/fault/faultForm" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -82,4 +82,29 @@
}
.imgDiv-video{
width: 24px;
}
\ No newline at end of file
}
.dataCenter-container .el-dialog{
background-image: url("/h5/machineroom/img/img-beijing-dp.png");
}
.dataCenter-container .el-dialog__title{
color:#FFFFFF;
}
.dataCenter-container .machine-room .el-tabs__item{
color:#FFFFFF;
}
.dataCenter-container .machine-room .el-tabs__item:hover,.dataCenter-container .machine-room .el-tabs__item.is-active{
color:#3B91FF;
}
.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
border-bottom-color: #0b122c;
}
.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item{
border-left-color: #00ccff;
}
.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header{
border-bottom-color: #00ccff;;
}
.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
border-color: #00ccff;
}
... ...
... ... @@ -58,7 +58,9 @@ export default {
bottom: '1%',
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: 'axis'
},
legend: props.legend,
xAxis: {
data: props.xAxis
... ...
... ... @@ -31,7 +31,7 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in frequencyArr"
<el-dropdown-item v-for="item in frequencyArr" @click="getChartData()"
:key="item.ddicId"
:command="{value:item.ddicCode,label:item.ddicName,flag:1}">
<el-radio v-model="form.scene.frequency" :label="item.ddicCode">{{item.ddicName}}
... ... @@ -52,12 +52,18 @@
<el-row :gutter="5">
<el-col :span="4">
<div style="display: flex;flex-wrap: wrap;width: 100%;padding-left: 15px;">
<el-dropdown>
<el-icon class="el-icon--right">
<!--<el-dropdown>
<el-icon class="el-icon&#45;&#45;right">
<arrow-down/>
</el-icon>
<cm-biz-type-tree-input multiple clearable collapseTags @callback="getBizType"/>
</el-dropdown>
</el-dropdown>-->
<el-select v-model="busTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标" style="margin-top: 10px">
<el-option
v-for="item in busTypeList"
:label="item.busTypeName" :value="item.busId"></el-option>
</el-select>
<el-dropdown>
<el-icon class="el-icon--right">
... ... @@ -66,12 +72,18 @@
<cm-res-type-tree-input multiple clearable collapseTags @callback="getResType"/>
</el-dropdown>
<el-dropdown>
<el-icon class="el-icon--right">
<!--<el-dropdown>
<el-icon class="el-icon&#45;&#45;right">
<arrow-down/>
</el-icon>
<cm-kpi-type-tree-input multiple clearable collapseTags @callback="getKpiType"/>
</el-dropdown>
</el-dropdown>-->
<el-select v-model="kpiTypeArr" multiple filterable clearable collapse-tags placeholder="请选择指标" style="margin-top: 10px">
<el-option
v-for="item in kpiList"
:label="item.kpiName" :value="item.kpiId"></el-option>
</el-select>
<el-input v-model="keyWords" placeholder="输入关键字" style="margin-top: 15px;width: 225px;"/>
... ...
... ... @@ -123,13 +123,13 @@ export default {
]);
var id = proxy.$global.getQueryVariable('configId');
var id = proxy.$global.getQueryVariable('configId') ;
let resTypeArr = Vue.ref([]);
let kpiTypeArr = Vue.ref([]);
let busTypeArr = Vue.ref([]);
let keyWords = Vue.ref('');
let config = Vue.ref(id);
let config = Vue.ref(id == false ? null : id);
let lineChart = Vue.ref({
legend: {
data: []
... ... @@ -190,20 +190,22 @@ export default {
}
// 查询参数
let params = {
keyWords: keyWords.value,
resType: resTypeArr.value.join(','),
kpiType: kpiTypeArr.value.join(','),
bizType: busTypeArr.value.join(','),
configId: config.value
let getParams = () =>{
return {
keyWords: keyWords.value,
resType: resTypeArr.value.join(','),
kpiType: kpiTypeArr.value.join(','),
bizType: busTypeArr.value.join(','),
configId: config.value
}
}
let loadFirstList = (reload) => {
if (!reload && tabFirstList.value.length > 0) {
return false;
}
// if (!reload && tabFirstList.value.length > 0) {
// return false;
// }
proxy.$http.get(`/api-web/ContrastAnalysis/added`, params, function (res) {
proxy.$http.get(`/api-web/ContrastAnalysis/added`, getParams(), function (res) {
if (res && res.data) {
tabFirstList.value = res.data;
}
... ... @@ -211,10 +213,10 @@ export default {
}
let loadSecondList = (reload) => {
if (!reload && tabSecondList.value.length > 0) {
return false;
}
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, params, function (res) {
// if (!reload && tabSecondList.value.length > 0) {
// return false;
// }
proxy.$http.get(`/api-web/ContrastAnalysis/notAdded`, getParams(), function (res) {
if (res && res.data) {
tabSecondList.value = res.data;
}
... ... @@ -252,6 +254,9 @@ export default {
let timeRangeChange = (item) => {
let code = item.ddicCode;
loadFrequency(code);
// 加载echar
getChartData();
}
let addRes = (row, index) => {
... ... @@ -279,6 +284,14 @@ export default {
}catch (e) {
timeScope = form.value.scene.timeScope.replace("time_scope_", "")
}
let frequency = form.value.scene.frequency;
try {
let arr = frequency.split('_');
frequency = arr[arr.length - 1];
}catch (e) {
}
if (timeScope == '') {
proxy.$global.showMsg("请选择时间范围！", "warning");
return;
... ... @@ -294,7 +307,7 @@ export default {
let p = {
timeScope: timeScope,
frequency: form.value.scene.frequency,
frequency: frequency,
resource: resList,
type : 'avg'
}
... ... @@ -459,9 +472,37 @@ export default {
});
}
let resTypeList = Vue.ref([]);
let kpiList = Vue.ref([]);
let busTypeList = Vue.ref([]);
let init = () =>{
/*
proxy.$http.get("/api-web/home/resType/getTree?typeParentFlag=1", {}, function(res) {
if (res && res.data) {
resTypeList.value = res.data;
}
})
*/
proxy.$http.get("/api-web/manage/kpi/list", {}, function(res) {
if (res && res.data) {
kpiList.value = res.data;
}
})
proxy.$http.get("/api-web/home/business/findAllBusType", {}, function(res) {
if (res && res.data) {
busTypeList.value = res.data;
}
})
}
// 挂载完
Vue.onMounted(() => {
init();
if(!id){
activeName.value = 'second';
}
... ... @@ -481,6 +522,10 @@ export default {
return {
resTypeList,
kpiList,
busTypeList,
height,
lineChart,
form,
... ... @@ -495,7 +540,11 @@ export default {
getResType,
getKpiType,
getBizType,
keyWords,
resTypeArr,
kpiTypeArr,
busTypeArr,
loadFirstList,
loadSecondList,
... ... @@ -514,7 +563,8 @@ export default {
dialogFormVisible,
showDialogForm,
saveAnalysis,
parentList
parentList,
getChartData
}
}
}
... ...
... ... @@ -64,9 +64,11 @@ export default {
}
let frequency = v.node.frequency;
if(time){
try {
let arr = frequency.split('_');
frequency = arr[arr.length - 1];
}catch (e) {
}
let p = {
... ...
<iframe v-if="src" style="width:1100px;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
... ...
... ... @@ -11,7 +11,7 @@ export default {
titleFontSize:20,
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
busId: '53bebbd79f384f619513b50666ea1d48',
performanceData:'',
xAxisData:'',
... ... @@ -41,17 +41,19 @@ export default {
// 半透明的颜色值
const colorArr1 = [
'rgba(255,0,255, 0.8)',
'rgba(23,212,152, 0.8)',
'rgba(253,152,58, 0.8)',
'rgba(255,113,66, 0.8)'
'rgba(255,238,0, 0.8)',
'rgba(255,113,66, 0.8)',
'rgba(255,0,255, 0.8)',
]
// 全透明的颜色值
const colorArr2 = [
'rgba(255,0,255, 0)',
'rgba(23,212,152, 0)',
'rgba(253,152,58, 0)',
'rgba(255,113,66, 0)'
'rgba(255,238,0, 0)',
'rgba(255,113,66, 0)',
'rgba(255,0,255, 0)',
]
// 挂载完
Vue.onMounted(() => {
... ... @@ -73,7 +75,7 @@ export default {
let xAxisData=Vue.ref([]);
let yAxisData=Vue.ref([]);
let mapData={
legend:[ "可用性","成功率","响应率","业务告警量"],
legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
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",
"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",
"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 {
}else{
i=1;
}
let areaStyle=0;
if(i==2){
areaStyle=1
}
ySeriesCommon.push(
{
name:item,
... ... @@ -148,7 +154,7 @@ export default {
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
... ... @@ -226,7 +232,7 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
data: proxy.xAxisData,
axisLine:{
show:false,//是否显示坐标线
... ...
... ... @@ -32,7 +32,8 @@
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 95)" :maxWidth="max">
<template #default="{row,prop,column}">
<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>
<!-- <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>-->
<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>
<component v-else-if="row[prop] && row[prop].props && row[prop].props.colComponents " v-bind:is="row[prop].props.colComponents"
:resId="row.resId"
... ... @@ -59,7 +60,7 @@
</div>
<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%;">
<div style="font-weight: bold;font-size: 20px;">
{{cellDetail.row[cellDetail.prop]}}布局图
<!--{{cellDetail.row[cellDetail.prop]}}布局图-->
</div>
</div>
</template>
... ...
... ... @@ -35,7 +35,7 @@
</el-dialog>
<!--机房布局-->
<el-dialog v-model="outerVisible" :title="dialogMachineName" width="60%" @close="closeDialog">
<el-dialog v-model="outerVisible" :title="dialogMachineName" width="70%" @close="closeDialog" top="7vh">
<GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
</el-dialog>
... ...
... ... @@ -32,26 +32,26 @@ export default {
}
],//机房布局html数据
commandNameDataX:[
// {
// name:'萧山IDC二号机房',
// htmlName:'xiaoshansecond',
// val:'one'
// },
// {
// name:'萧山IDC三号机房',
// htmlName:'xiaoshanthird',
// val:'two'
// },
// {
// name:'萧山IDC七号机房',
// htmlName:'xiaoshanseven',
// val:'three'
// }
{
name:'兴议二号机房',
name:'萧山IDC二号机房',
htmlName:'xiaoshansecond',
val:'one'
},
{
name:'萧山IDC三号机房',
htmlName:'xiaoshanthird',
val:'two'
},
{
name:'萧山IDC七号机房',
htmlName:'xiaoshanseven',
val:'three'
}
// {
// name:'兴议二号机房',
// htmlName:'xiaoshansecond',
// val:'one'
// }
],
commandName:'',//下拉选择默认显示名称
htmlName:'',//机房组件名称-html名称
... ...
... ... @@ -21,7 +21,8 @@ export default {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
// kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',//可用性，成功率，响应率，业务告警量
kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
// busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
busId:'',
performanceData:'',
... ... @@ -46,17 +47,19 @@ export default {
});
// 半透明的颜色值
const colorArr1 = [
'rgba(255,0,255, 0.8)',
'rgba(23,212,152, 0.8)',
'rgba(253,152,58, 0.8)',
'rgba(255,113,66, 0.8)'
'rgba(255,238,0, 0.8)',
'rgba(255,113,66, 0.8)',
'rgba(255,0,255, 0.8)',
]
// 全透明的颜色值
const colorArr2 = [
'rgba(255,0,255, 0)',
'rgba(23,212,152, 0)',
'rgba(253,152,58, 0)',
'rgba(255,113,66, 0)'
'rgba(255,238,0, 0)',
'rgba(255,113,66, 0)',
'rgba(255,0,255, 0)',
]
// 挂载完
Vue.onMounted(() => {
... ... @@ -77,7 +80,7 @@ export default {
let xAxisData=Vue.ref([]);
let yAxisData=Vue.ref([]);
let mapData={
legend:[ "可用性","成功率","响应率","业务告警量"],
legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
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",
"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",
"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 {
"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",
"10:00"
],
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]
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]
]
}
if (data ) {
... ... @@ -129,6 +132,10 @@ export default {
}else{
i=1;
}
let areaStyle=0;
if(i==2){
areaStyle=1
}
ySeriesCommon.push(
{
name:item,
... ... @@ -151,7 +158,7 @@ export default {
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
... ... @@ -221,14 +228,14 @@ export default {
grid: {
top:'10%',
left: '3%',
right: '4%',
right: '8%',
bottom: '20%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
data: proxy.xAxisData,
axisLine:{
show:false,//是否显示坐标线
... ...