instances 模块搭建
This commit is contained in:
parent
d16bbfc718
commit
fe6a1d1ff3
|
|
@ -39,6 +39,7 @@
|
|||
"vue-area-linkage": "^5.1.0",
|
||||
"vue-cropper": "^0.5.4",
|
||||
"vue-i18n": "^8.7.0",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-ls": "^3.2.0",
|
||||
"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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/TabMenu.less";
|
||||
.chart-layout{
|
||||
height: 230px;
|
||||
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{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class="chart-title">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,7 +39,7 @@
|
|||
padding: 0 15px;
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
}
|
||||
img{
|
||||
.right{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
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>
|
||||
<div>
|
||||
instances
|
||||
<div style="height: 100%;">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
import Details from './details.vue';
|
||||
export default {
|
||||
components: {
|
||||
Details,
|
||||
},
|
||||
methods: {
|
||||
handleTabChange(key) {
|
||||
console.log(key);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
@import "~@/assets/less/TabMenu.less";
|
||||
|
||||
</style>
|
||||
|
|
@ -11622,6 +11622,11 @@ vue-i18n@^8.7.0:
|
|||
resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.18.2.tgz#cd7c12f2e178e6faa23b0e3cfd2f7bac9305f8fc"
|
||||
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:
|
||||
version "13.7.3"
|
||||
resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user