instances 模块搭建
This commit is contained in:
parent
d16bbfc718
commit
fe6a1d1ff3
|
|
@ -39,6 +39,7 @@
|
||||||
"vue-area-linkage": "^5.1.0",
|
"vue-area-linkage": "^5.1.0",
|
||||||
"vue-cropper": "^0.5.4",
|
"vue-cropper": "^0.5.4",
|
||||||
"vue-i18n": "^8.7.0",
|
"vue-i18n": "^8.7.0",
|
||||||
|
"vue-infinite-scroll": "^2.0.2",
|
||||||
"vue-loader": "^15.7.0",
|
"vue-loader": "^15.7.0",
|
||||||
"vue-ls": "^3.2.0",
|
"vue-ls": "^3.2.0",
|
||||||
"vue-photo-preview": "^1.1.3",
|
"vue-photo-preview": "^1.1.3",
|
||||||
|
|
|
||||||
BIN
src/assets/images/abnormalAlarm/alarm.png
Normal file
BIN
src/assets/images/abnormalAlarm/alarm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/abnormalAlarm/cpu.png
Normal file
BIN
src/assets/images/abnormalAlarm/cpu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/images/abnormalAlarm/email.png
Normal file
BIN
src/assets/images/abnormalAlarm/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/abnormalAlarm/icon-r.png
Normal file
BIN
src/assets/images/abnormalAlarm/icon-r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/abnormalAlarm/icon-y.png
Normal file
BIN
src/assets/images/abnormalAlarm/icon-y.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/abnormalAlarm/partition.png
Normal file
BIN
src/assets/images/abnormalAlarm/partition.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/abnormalAlarm/ram.png
Normal file
BIN
src/assets/images/abnormalAlarm/ram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/images/abnormalAlarm/running.png
Normal file
BIN
src/assets/images/abnormalAlarm/running.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/images/abnormalAlarm/times.png
Normal file
BIN
src/assets/images/abnormalAlarm/times.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/abnormalAlarm/warning.png
Normal file
BIN
src/assets/images/abnormalAlarm/warning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
80
src/assets/less/TabMenu.less
Normal file
80
src/assets/less/TabMenu.less
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
::v-deep {
|
||||||
|
.ant-tabs{
|
||||||
|
height: 100%;
|
||||||
|
.ant-tabs-top-content{
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.ant-tabs-tabpane{
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-tabs-bar{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
background-color: rgba(12, 235, 201, 0.05);
|
||||||
|
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||||
|
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||||
|
}
|
||||||
|
.ant-tabs-nav .ant-tabs-tab{
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
background-color: rgba(58, 236, 240, 0.22);
|
||||||
|
font-family: BookmanOldStyle;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-stretch: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: #c9f6f6;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
padding: 0 23px;
|
||||||
|
position: relative;
|
||||||
|
&::before{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 7px;
|
||||||
|
height: 29px;
|
||||||
|
color: rgba(58, 236, 240, 0.22);
|
||||||
|
border: 1px solid #569e9e;
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 7px;
|
||||||
|
height: 29px;
|
||||||
|
color: rgba(58, 236, 240, 0.22);
|
||||||
|
border: 1px solid #569e9e;
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
&-active{
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border-color: #0cecca !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-tabs-ink-bar{
|
||||||
|
display: none !important
|
||||||
|
}
|
||||||
|
.ant-tabs-nav .ant-tabs-tab-active{
|
||||||
|
color: #2affdf;
|
||||||
|
}
|
||||||
|
.ant-row{
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.ant-tabs-tab-prev, .ant-tabs-tab-next{
|
||||||
|
color: #c9f6f6;
|
||||||
|
}
|
||||||
|
.ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
|
||||||
|
color: #2affdf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -442,90 +442,11 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import "~@/assets/less/TabMenu.less";
|
||||||
.chart-layout{
|
.chart-layout{
|
||||||
height: 230px;
|
height: 230px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
::v-deep {
|
|
||||||
.ant-tabs{
|
|
||||||
height: 100%;
|
|
||||||
.ant-tabs-top-content{
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
.ant-tabs-tabpane{
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-tabs-bar{
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
background-color: rgba(12, 235, 201, 0.05);
|
|
||||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
|
||||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
|
||||||
}
|
|
||||||
.ant-tabs-nav .ant-tabs-tab{
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
background-color: rgba(58, 236, 240, 0.22);
|
|
||||||
font-family: BookmanOldStyle;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-stretch: normal;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
color: #c9f6f6;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
padding: 0 23px;
|
|
||||||
position: relative;
|
|
||||||
&::before{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 7px;
|
|
||||||
height: 29px;
|
|
||||||
color: rgba(58, 236, 240, 0.22);
|
|
||||||
border: 1px solid #569e9e;
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
&::after{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 7px;
|
|
||||||
height: 29px;
|
|
||||||
color: rgba(58, 236, 240, 0.22);
|
|
||||||
border: 1px solid #569e9e;
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
&-active{
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
border-color: #0cecca !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-tabs-ink-bar{
|
|
||||||
display: none !important
|
|
||||||
}
|
|
||||||
.ant-tabs-nav .ant-tabs-tab-active{
|
|
||||||
color: #2affdf;
|
|
||||||
}
|
|
||||||
.ant-row{
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
.ant-tabs-tab-prev, .ant-tabs-tab-next{
|
|
||||||
color: #c9f6f6;
|
|
||||||
}
|
|
||||||
.ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover{
|
|
||||||
color: #2affdf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.analysis-chart{
|
.analysis-chart{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-title">
|
<div class="chart-title">
|
||||||
<span>{{ title }}</span>
|
<span>{{ title }}</span>
|
||||||
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
<div class="right">
|
||||||
|
<slot name="right">
|
||||||
|
<img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -35,7 +39,7 @@
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
background-color: rgba(12, 235, 201, 0.05);
|
background-color: rgba(12, 235, 201, 0.05);
|
||||||
}
|
}
|
||||||
img{
|
.right{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
|
||||||
603
src/views/abnormalAlarm/serverMonitor/instances/details.vue
Normal file
603
src/views/abnormalAlarm/serverMonitor/instances/details.vue
Normal file
|
|
@ -0,0 +1,603 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%;">
|
||||||
|
<div class="content-top">
|
||||||
|
<div style="width: calc( 100% - 562px);">
|
||||||
|
<BoxTitle title="Basic lnformation"></BoxTitle>
|
||||||
|
<div class="basic-info">
|
||||||
|
<div
|
||||||
|
class="basic-info-list"
|
||||||
|
v-infinite-scroll="handleInfiniteOnLoad"
|
||||||
|
:infinite-scroll-disabled="busy"
|
||||||
|
:infinite-scroll-distance="5"
|
||||||
|
>
|
||||||
|
<a-list :dataSource="dataSource">
|
||||||
|
<a-list-item :class="{ 'ant-list-item-active': index===currIndex}" slot="renderItem" slot-scope="item, index" @click="handleBasicItem(index)">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
</a-list-item>
|
||||||
|
<div v-if="loading && !busy" class="demo-loading-container">
|
||||||
|
<a-spin />
|
||||||
|
</div>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail">
|
||||||
|
<a-row :gutter="10" style="height: 40px;">
|
||||||
|
<a-col :span="6" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/running.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">running state</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num state">NORMAL</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="5" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/alarm.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">Alarm SMS</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6" style="height: 100%;padding-left:12px">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/email.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">Alarm email</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/warning.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">Number of alarms</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="10" style="height: 40px;margin-top: 10px;">
|
||||||
|
<a-col :span="6" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/times.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">Run time</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">126.5h</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="5" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/ram.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">RAM Size</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">28.9GB</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6" style="height: 100%;padding-left:12px">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/cpu.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">CPU Cores</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="7" style="height: 100%;">
|
||||||
|
<div class="basic-info-detail-col">
|
||||||
|
<div class="basic-info-detail-col-img">
|
||||||
|
<img src="~@/assets/images/abnormalAlarm/partition.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg">
|
||||||
|
<div class="basic-info-detail-col-msg-title">
|
||||||
|
<div class="circle"></div>
|
||||||
|
<div class="title">Total Disk Partition</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-detail-col-msg-num">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<div class="basic-info-detail-content">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">Host Name:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">PC-01</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">7.8 64-bit</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">IP Address:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">192.168.1.1</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">Kernel version:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">2000</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">Centos</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
|
||||||
|
<a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="4" style="height: 26px;" class="basic-info-detail-content-key">CPU:</a-col>
|
||||||
|
<a-col :span="20" style="height: 26px;" class="basic-info-detail-content-val">Inte(R)Core(TM)i7-8750H CPU@2.2GHz</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Manufacturer:</a-col>
|
||||||
|
<a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">ASUSTeK COMPUTER INC.</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="8" style="height: 26px;" class="basic-info-detail-content-key">Server Agent Path:</a-col>
|
||||||
|
<a-col :span="16" style="height: 26px;" class="basic-info-detail-content-val">C:\Agent\Default\Desktop</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="11" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="18" class="basic-info-detail-content-key">Network Lnterface:</a-col>
|
||||||
|
<a-col :span="6" class="basic-info-detail-content-val">11</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="13" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="15" class="basic-info-detail-content-key">Location:</a-col>
|
||||||
|
<a-col :span="9" class="basic-info-detail-content-val">China</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="11" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="18" class="basic-info-detail-content-key">Time Zone:</a-col>
|
||||||
|
<a-col :span="6" class="basic-info-detail-content-val">CST</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="13" style="height: 26px;">
|
||||||
|
<a-row style="height: 100%;">
|
||||||
|
<a-col :span="15" class="basic-info-detail-content-key">Server Agent User:</a-col>
|
||||||
|
<a-col :span="9" class="basic-info-detail-content-val">LocalSystem</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Start Time:</a-col>
|
||||||
|
<a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">2023-03-01 14:00:01</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Model Number:</a-col>
|
||||||
|
<a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">TUF GamingFX705GM_FX86SM</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row style="height: 26px;">
|
||||||
|
<a-col :span="6" style="height: 26px;" class="basic-info-detail-content-key">Bios Supplier:</a-col>
|
||||||
|
<a-col :span="18" style="height: 26px;" class="basic-info-detail-content-val">American Megatrends lnc.</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width:542px">
|
||||||
|
<BoxTitle title="Alarm information"></BoxTitle>
|
||||||
|
<div
|
||||||
|
class="alarm-info-list"
|
||||||
|
v-infinite-scroll="handleInfiniteAlarmInfo"
|
||||||
|
:infinite-scroll-disabled="busy_alarm_info"
|
||||||
|
:infinite-scroll-distance="10"
|
||||||
|
>
|
||||||
|
<a-list :dataSource="dataSource_alarm_info">
|
||||||
|
<a-list-item slot="renderItem" slot-scope="item">
|
||||||
|
<img class="alarm-info-list-img" src="@/assets/images/abnormalAlarm/icon-r.png" alt="">
|
||||||
|
<div class="alarm-info-list-info">{{ JSON.parse(item.alarmInfo).info }}</div>
|
||||||
|
<div class="alarm-info-list-date">{{ item.alarmStartDate }}</div>
|
||||||
|
<a slot="actions" class="alarm-info-list-actions">Detail</a>
|
||||||
|
</a-list-item>
|
||||||
|
<div v-if="loading_alarm_info && !busy" class="demo-loading-container">
|
||||||
|
<a-spin />
|
||||||
|
</div>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-center">
|
||||||
|
<BoxTitle title="Event Timelinen">
|
||||||
|
<template slot="right">asdfadf</template>
|
||||||
|
</BoxTitle>
|
||||||
|
</div>
|
||||||
|
<div class="content-bottom">
|
||||||
|
<div class="content-bottom-left">
|
||||||
|
<div class="content-bottom-left-top">
|
||||||
|
<a-row :gutter="20">
|
||||||
|
<a-col class="gutter-row" :span="8">
|
||||||
|
<BoxTitle title="CPU"></BoxTitle>
|
||||||
|
</a-col>
|
||||||
|
<a-col class="gutter-row" :span="8">
|
||||||
|
<BoxTitle title="MEMORY"></BoxTitle>
|
||||||
|
</a-col>
|
||||||
|
<a-col class="gutter-row" :span="8">
|
||||||
|
<BoxTitle title="LOADS"></BoxTitle>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
<div class="content-bottom-left-bottom">
|
||||||
|
<BoxTitle title="CPU utilization">
|
||||||
|
<template slot="right">asdfadf</template>
|
||||||
|
</BoxTitle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width:542px">
|
||||||
|
<BoxTitle title="DISK"></BoxTitle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BoxTitle from '../../components/boxTitle.vue';
|
||||||
|
import infiniteScroll from 'vue-infinite-scroll';
|
||||||
|
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
||||||
|
export default {
|
||||||
|
directives: { infiniteScroll },
|
||||||
|
components: {
|
||||||
|
BoxTitle,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataSource: [],
|
||||||
|
loading: false,
|
||||||
|
busy: false,
|
||||||
|
ipagination:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
dataSource_alarm_info: [],
|
||||||
|
loading_alarm_info: false,
|
||||||
|
busy_alarm_info: false,
|
||||||
|
ipagination_alarm_info:{
|
||||||
|
current: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
currIndex:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.getSysServer(res => {
|
||||||
|
this.loading = false
|
||||||
|
if (res.success) {
|
||||||
|
this.ipagination.total = res.result.total
|
||||||
|
this.dataSource = res.result.records
|
||||||
|
} else {
|
||||||
|
this.$message.warning("This operation fails. Contact your system administrator")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.getServerAlarmHistory(res => {
|
||||||
|
this.loading_alarm_info = false
|
||||||
|
if (res.success) {
|
||||||
|
this.ipagination_alarm_info.total = res.result.total
|
||||||
|
this.dataSource_alarm_info = res.result.records
|
||||||
|
} else {
|
||||||
|
this.$message.warning("This operation fails. Contact your system administrator")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getSysServer(callBack) {
|
||||||
|
this.loading = true
|
||||||
|
let params = {
|
||||||
|
pageNo: this.ipagination.current,
|
||||||
|
pageSize: this.ipagination.pageSize
|
||||||
|
}
|
||||||
|
getAction("/sysServer/findPage", params).then(res => {
|
||||||
|
callBack(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleInfiniteOnLoad() {
|
||||||
|
if (this.dataSource.length>0) {
|
||||||
|
const dataSource = this.dataSource;
|
||||||
|
this.loading = true;
|
||||||
|
if (dataSource.length == this.ipagination.total) {
|
||||||
|
this.$message.warning('Infinite List loaded all');
|
||||||
|
this.busy = true;
|
||||||
|
this.loading = false;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.ipagination.current += 1
|
||||||
|
this.getSysServer(res => {
|
||||||
|
this.ipagination.total = res.result.total
|
||||||
|
this.dataSource = dataSource.concat(res.result.records);
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleBasicItem(i) {
|
||||||
|
this.currIndex = i
|
||||||
|
},
|
||||||
|
getServerAlarmHistory(callBack) {
|
||||||
|
this.loading = true
|
||||||
|
let params = {
|
||||||
|
startDate: "2022-08-01",
|
||||||
|
endDate: "2023-08-07",
|
||||||
|
pageNo: this.ipagination_alarm_info.current,
|
||||||
|
pageSize: this.ipagination_alarm_info.pageSize,
|
||||||
|
}
|
||||||
|
getAction("/sysServer/findAlarmHistory", params).then(res => {
|
||||||
|
callBack(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleInfiniteAlarmInfo() {
|
||||||
|
if (this.dataSource_alarm_info.length>0) {
|
||||||
|
const dataSource_alarm_info = this.dataSource_alarm_info;
|
||||||
|
this.loading_alarm_info = true;
|
||||||
|
if (dataSource_alarm_info.length == this.ipagination_alarm_info.total) {
|
||||||
|
this.$message.warning('Infinite List loaded all');
|
||||||
|
this.busy_alarm_info = true;
|
||||||
|
this.loading_alarm_info = false;
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.ipagination_alarm_info.current += 1
|
||||||
|
this.getServerAlarmHistory(res => {
|
||||||
|
this.ipagination_alarm_info.total = res.result.total
|
||||||
|
this.dataSource_alarm_info = dataSource_alarm_info.concat(res.result.records);
|
||||||
|
this.loading_alarm_info = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.content-top{
|
||||||
|
width: 100%;
|
||||||
|
height: 331px;
|
||||||
|
// height: 43.5%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.basic-info{
|
||||||
|
width: 100%;
|
||||||
|
height:291px;
|
||||||
|
padding: 15px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&-list{
|
||||||
|
height: 100%;
|
||||||
|
width: 170px;
|
||||||
|
overflow: auto;
|
||||||
|
border: solid 1px rgba(65, 111, 127, 0.5);
|
||||||
|
.ant-list-item{
|
||||||
|
border: none;
|
||||||
|
height: 32px;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #ade6ee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ant-list-item:nth-child(even){
|
||||||
|
background-color: rgba(13, 109, 118, 0.2);
|
||||||
|
}
|
||||||
|
.ant-list-item-active{
|
||||||
|
background-color: rgb(15, 158, 171, 0.5) !important;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.demo-loading-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-detail{
|
||||||
|
height: 100%;
|
||||||
|
width: calc(100% - 185px);
|
||||||
|
&-col{
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
&-img{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
float: left;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-msg{
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: 15px;
|
||||||
|
&-title{
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
left: 47px;
|
||||||
|
top: 2px;
|
||||||
|
.circle{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-image: linear-gradient(90deg, #0e98a8 0%, #00fffc 100%),
|
||||||
|
linear-gradient( #0cecca, #0cecca);
|
||||||
|
background-blend-mode: normal, normal;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 0;
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #ade6ee;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-num{
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: 47px;
|
||||||
|
bottom: 0px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-family: MicrogrammaD-MediExte;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.state{
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #06cdd3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
height: 161px;
|
||||||
|
border: solid 1px rgba(65, 111, 127, 0.5);
|
||||||
|
background-color: rgba(2, 40, 43, 0.5);
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
&-key{
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 26px;
|
||||||
|
color: #6ebad0;
|
||||||
|
}
|
||||||
|
&-val{
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 26px;
|
||||||
|
color: #ade6ee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alarm-info-list{
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 16px;
|
||||||
|
.ant-list-item{
|
||||||
|
border: none;
|
||||||
|
height: 52px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #ade6ee;
|
||||||
|
}
|
||||||
|
.ant-list-item:nth-child(odd){
|
||||||
|
background-color: rgba(13, 109, 118, 0.2);
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
&-info{
|
||||||
|
display: inline-block;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
&-date{
|
||||||
|
display: inline-block;
|
||||||
|
color: #90b4c5;
|
||||||
|
}
|
||||||
|
&-actions{
|
||||||
|
|
||||||
|
color: #17c6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-center{
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
// height: 14.9%;
|
||||||
|
}
|
||||||
|
.content-bottom{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 461px);
|
||||||
|
// height: 41.6%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&-left{
|
||||||
|
width: calc( 100% - 562px);
|
||||||
|
height: 100%;
|
||||||
|
&-top{
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
&-bottom{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 160px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,15 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div style="height: 100%;">
|
||||||
instances
|
<a-card :bordered="false" style="height:100%;margin-left: 20px;">
|
||||||
|
<a-tabs default-active-key="detais" @change="handleTabChange">
|
||||||
|
<a-tab-pane key="detais" tab="DETAILS">
|
||||||
|
<Details></Details>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="service-process" tab="SERVICE AND PROCESS">
|
||||||
|
SERVICE AND PROCESS
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="monitor" tab="MONITOR">
|
||||||
|
MONITOR
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="cpu" tab="CPU">
|
||||||
|
CPU
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="memory" tab="MEMORY">
|
||||||
|
MEMORY
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="disk" tab="DISK">
|
||||||
|
DISK
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import Details from './details.vue';
|
||||||
|
export default {
|
||||||
}
|
components: {
|
||||||
|
Details,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleTabChange(key) {
|
||||||
|
console.log(key);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="less" scoped>
|
||||||
|
@import "~@/assets/less/TabMenu.less";
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -11622,6 +11622,11 @@ vue-i18n@^8.7.0:
|
||||||
resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
|
resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
|
||||||
integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
|
integrity sha512-0X5nBTCZAVjlwcrPaYJwNs3iipBBTv0AUHwQUOa8yP3XbQGWKbRHqBb3OhCYtum/IHDD21d/df5Xd2VgyxbxfA==
|
||||||
|
|
||||||
|
vue-infinite-scroll@^2.0.2:
|
||||||
|
version "2.0.2"
|
||||||
|
resolved "https://registry.npmmirror.com/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
|
||||||
|
integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
|
||||||
|
|
||||||
vue-loader@^13.0.5:
|
vue-loader@^13.0.5:
|
||||||
version "13.7.3"
|
version "13.7.3"
|
||||||
resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"
|
resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user