From d579c21d4d8664191266f6f59d928c02dc54b299 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 12 十一月 2022 14:53:30 +0800
Subject: [PATCH] 系统监控页面修改
---
src/views/maintenance/systemMonitoring.vue | 773 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 495 insertions(+), 278 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index d2512b3..7918612 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -7,7 +7,162 @@
]"
></My-bread>
<el-divider />
- <div class="inform_box">
+ <div class="content_Box">
+ <div class="cloumn_Box">
+ <div class="flex_Box">
+ <div style="width: 100%; height: 20px">
+ <div class="image1"></div>
+ <div class="imageTitle">鍐呭瓨鐩戞帶</div>
+ </div>
+ <div class="top_Box1">
+ <div class="top_box_left">
+ <div class="left_title">
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.haveBeenUsed')
+ }}</label
+ >
+ <p>{{ memInfo.use }}</p>
+ </div>
+ <div class="height_title">
+ <label>浣跨敤鐜�</label>
+ <p>{{ memInfo.usage }}</p>
+ </div>
+ </div>
+ <div class="left_title">
+ <div class="height_title">
+ <label>
+ {{
+ $t('operatManage.systemMonitoringObj.totalMemory')
+ }}</label
+ >
+ <p>{{ memInfo.totalMem }}</p>
+ </div>
+ <div class="height_title">
+ <label>鍓╀綑鍐呭瓨</label>
+ <p>{{ memInfo.remainMem }}</p>
+ </div>
+ </div>
+ </div>
+ <div class="top_box_right">
+ <div id="shuiwen" style="width: 300px; height: 300px"></div>
+ </div>
+ </div>
+ </div>
+ <div class="flex_Box">
+ <div>
+ <div class="image2"></div>
+ <div style="line-height: 32px" class="imageTitle">CPU鐩戞帶</div>
+ </div>
+ <div
+ id="Sys_cpu_chart"
+ style="width: 100%; height: 86%; margin-top: 8%"
+ ></div>
+ </div>
+ <div class="flex_Box">
+ <div style="width: 100%; height: 34px">
+ <div class="image3"></div>
+ <div style="line-height: 32px" class="imageTitle">寮傚父鏁�</div>
+ </div>
+ <div class="ycsBox">
+ <div class="ycTltle">{{ resInfoCount }}</div>
+ <div
+ style="
+ width: 110px;
+ height: 16px;
+ font-size: 16px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #ffffff;
+ line-height: 49px;
+ margin-left: 51px;
+ margin-top: 20px;
+ "
+ >
+ 绯荤粺寮傚父涓暟
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cloumn_Box1">
+ <div class="flex_Box1">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane
+ :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
+ name="first"
+ ><el-table :data="resInfo" style="width: 100%; height: 310px">
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.systemMonitoringObj.resourceID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.systemMonitoringObj.resourceName')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="bak"
+ :label="$t('operatManage.systemMonitoringObj.resourceState')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="createTime"
+ :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+ show-overflow-tooltip
+ >
+ </el-table-column> </el-table
+ ></el-tab-pane>
+ <el-tab-pane label="鏈嶅姟璧勬簮鐘舵��" name="second">
+ <div id="resUseChart" style="width: 995px; height: 310px"></div>
+ </el-tab-pane>
+ <el-tab-pane label="鐢ㄦ埛鐧诲綍鐘舵��" name="third">
+ <div
+ id="userLoginChart"
+ style="width: 995px; height: 310px"
+ ></div>
+ </el-tab-pane>
+ <el-tab-pane label="璧勬簮鎿嶄綔鐘舵��" name="fourth"
+ ><div
+ id="operateCountChart"
+ style="width: 995px; height: 310px"
+ ></div
+ ></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="flex_Box">
+ <div>
+ <div style="line-height: 32px" class="imageTitle">鍦ㄧ嚎浜哄憳</div>
+ </div>
+ <el-table :data="tableData" style="width: 100%" height="90%">
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('operatManage.ELM.index')"
+ width="100px"
+ />
+ <el-table-column
+ prop="uid"
+ :label="$t('operatManage.systemMonitoringObj.userID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="uname"
+ :label="$t('operatManage.systemMonitoringObj.username')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="loginTime"
+ :label="$t('operatManage.systemMonitoringObj.onlineTime')"
+ fixed="right"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="inform_box">
<div class="content_box">
<div class="top_box">
<div style="width: 100%; height: 100%">
@@ -36,21 +191,6 @@
"
></div>
</div>
- <!-- <div class="Syslabel">
- {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
- </div>
- <div class="details">{{ memInfo.totalMem }}</div> -->
- <!-- -->
- <!-- <div class="Syslabel">
- <span
- >{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
- {{ memInfo.use }}</span
- >
- <span style="margin-left: 25px"
- >{{ $t('operatManage.systemMonitoringObj.usageRate') }}
- {{ memInfo.usage }}</span
- >
- </div> -->
</div>
<div class="bottom_box">
{{ $t('operatManage.systemMonitoringObj.systemMemory') }}
@@ -79,13 +219,6 @@
{{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
</div>
</div>
- <!-- <div class="content_box">
- <div class="top_box">
- <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.serviceAarm')}}</div>
- <div class="details">8</div>
- </div>
- <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.serviceResourceAlarm')}}</div>
- </div> -->
</div>
<div class="chart_box">
<el-tabs v-model="activeName" @tab-click="handleClick">
@@ -131,7 +264,7 @@
<!-- <p class="title_box">
{{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
</p> -->
- <!-- <el-table :data="resInfo" style="width: 100%">
+ <!-- <el-table :data="resInfo" style="width: 100%">
<el-table-column
prop="id"
:label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -154,7 +287,7 @@
>
</el-table-column>
</el-table> -->
- <!-- <div style="margin-top: 10px" class="pagination_box">
+ <!-- <div style="margin-top: 10px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@@ -165,7 +298,7 @@
:total="4"
>
</el-pagination>
- </div> -->
+ </div>
</div>
<div class="left">
@@ -208,8 +341,8 @@
:total="4"
>
</el-pagination>
- </div> -->
- </div>
+ </div>
+ </div> -->
</div>
</template>
@@ -227,7 +360,7 @@
activeName: 'first',
ws: null,
tableData: [],
- memInfo: { totalMem: 0, use: 0, usage: 0 },
+ memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
cpuInfo: { cpuSysUsage: 0 },
resInfo: [],
resInfoCount: 0,
@@ -246,10 +379,9 @@
if (this.echartData.length == 7) {
this.echartData.splice(0, 1);
}
- this.echartData.push(parseFloat(res.cpuInfo.cpuSysUsage));
- this.lineChart1();
-
this.lineChart2(this.memInfo.usage);
+ this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
+ this.lineChart1();
},
SetTableData2(res) {
this.resInfo = res.resInfo;
@@ -279,14 +411,20 @@
}
},
lineChart1() {
- let option = {
- grid: {
- top: 0,
- left: '0%',
- right: '4%',
- bottom: '0%',
- containLabel: true,
- },
+ const valueList = this.echartData.map(function (item) {
+ return item[1];
+ });
+
+ var option = {
+ // Make gradient line here
+ visualMap: [
+ {
+ show: false,
+ type: 'continuous',
+ seriesIndex: 0,
+ },
+ ],
+ title: [],
tooltip: {
trigger: 'axis',
},
@@ -295,20 +433,30 @@
boundaryGap: false,
data: ['', '', '', '', '', '', ''],
},
- yAxis: {
- type: 'value',
- axisLabel: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ yAxis: [
+ {
+ axisLabel: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ },
},
- },
+ ],
+ grid: [
+ {
+ top: '10%',
+ bottom: '10%',
+ left: '10%',
+ right: '10%',
+ },
+ ],
series: [
{
- data: this.echartData,
type: 'line',
- areaStyle: {},
+ showSymbol: false,
+ data: valueList,
},
],
};
+
let myChart = this.$echarts.init(
document.getElementById('Sys_cpu_chart')
);
@@ -318,144 +466,134 @@
});
},
lineChart2(res) {
- var a = res.split('%').join('');
+ var a = 0;
+ if (res != 0) {
+ a = res.split('%').join('');
+ }
- let value = parseFloat(a);
- let data = [value, value, value];
- let option = {
- title: {
- text: value + '{a|%}',
+ var data = { name: '1111', value: parseFloat(a) / 100 };
+ var list = [];
+ let value = data.value;
+ list.push({ name: data.name, value: data.value });
+
+ for (let i = 0; i < 2; i++) {
+ if (value - 0.1 > 0) {
+ value -= 0.1;
+ list.push({ name: data.name, value: value });
+ }
+ }
+ var options = {
+ // 鎻愮ず妗嗙粍浠�
+ tooltip: {
+ show: false,
+ trigger: 'item', // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
textStyle: {
- fontSize: 15,
- fontFamily: 'Microsoft Yahei',
- fontWeight: 'normal',
- color: 'black',
- rich: {
- a: {
- fontSize: 15,
- },
- },
+ show: false,
},
- x: 'center',
- y: '35%',
+ formatter: function (value) {
+ return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
+ },
},
- graphic: [
- {
- type: 'group',
- left: 'center',
-
- children: [
- {
- type: 'text',
- z: 20,
- left: '10',
- top: '50',
- style: {
- fill: 'black',
- text: '浣跨敤鐜�',
- font: '20px Microsoft YaHei',
- fontWeight: '900',
- },
- },
- ],
- },
- ],
series: [
{
type: 'liquidFill',
- radius: '80%',
- center: ['50%', '50%'],
- // shape: 'roundRect',
- data: data,
- backgroundStyle: {
- color: {
- type: 'linear',
- x: 1,
- y: 0,
- x2: 0.5,
- y2: 1,
- colorStops: [
- {
- offset: 1,
- color: 'rgba(126,147,211, 0)',
- },
- {
- offset: 0.5,
- color: 'rgba(126,147,211, .25)',
- },
- {
- offset: 0,
- color: 'rgba(126,147,211, 1)',
- },
- ],
- globalCoord: false,
- },
- },
+ name: ' ',
+ radius: '40%',
+ center: ['30%', '30%'],
+ shape: 'circle',
+ phase: 0,
+ direction: 'right',
outline: {
- borderDistance: 0,
+ show: true,
+ borderDistance: 0, // 杈规绾夸笌鍥捐〃鐨勮窛绂� 鏁板瓧
itemStyle: {
- borderWidth: 20,
- borderColor: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(69, 73, 240, 0)',
- },
- {
- offset: 0.5,
- color: 'rgba(69, 73, 240, .25)',
- },
- {
- offset: 1,
- color: 'rgba(69, 73, 240, 1)',
- },
- ],
- globalCoord: false,
- },
- shadowBlur: 10,
- shadowColor: '#000',
+ opacity: 1,
+ borderWidth: 0,
+ borderColor: '#2bf9ed',
},
},
+ // 鍥惧舰鏍峰紡
itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 1,
- color: 'rgba(58, 71, 212, 0)',
- },
- {
- offset: 0.5,
- color: 'rgba(31, 222, 225, .2)',
- },
- {
- offset: 0,
- color: 'rgba(31, 222, 225, 1)',
- },
- ],
- globalCoord: false,
+ color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#c5e87e' }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.5, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ ]),
+ opacity: 0.5,
+ shadowBlur: 10,
+ },
+ backgroundStyle: {
+ color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.4, color: '#44C0C1' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ ]),
+ opacity: 0.5,
+ },
+ // 鍥惧舰鐨勯珮浜牱寮�
+ emphasis: {
+ itemStyle: {
+ opacity: 1,
},
+ },
+ // 鍥惧舰涓婄殑鏂囨湰鏍囩
+ label: {
+ fontSize: 40,
+ fontWeight: 600,
+ color: '#fff',
+ },
+ data: list,
+ },
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['43%', '50%'],
+ center: ['30%', '30%'],
+ startAngle: 340,
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
},
label: {
- normal: {
- formatter: '',
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold',
},
+ },
+ labelLine: {
+ show: false,
+ },
+ data: [
+ {
+ value: 0.4,
+ name: 'Direct',
+ itemStyle: {
+ color: '#2bf9ed',
+ },
+ },
+ {
+ value: 0.6,
+ name: 'Direct',
+ itemStyle: {
+ color: 'rgba(240, 248, 255, 0)',
+ },
+ },
+ ],
+ emphasis: {
+ disabled: true,
+ },
+ tooltip: {
+ show: false,
},
},
],
};
let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
- myChart1.setOption(option);
+ myChart1.setOption(options);
window.addEventListener('resize', function () {
myChart1.resize();
});
@@ -472,6 +610,10 @@
legend: {
top: '5%',
left: 'center',
+ textStyle: {
+ fontSize: 18, //瀛椾綋澶у皬
+ color: '#ffffff', //瀛椾綋棰滆壊
+ },
},
series: [
{
@@ -645,129 +787,204 @@
.systemMonitoring_box {
border-radius: 10px;
height: 100%;
-
box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- .inform_box {
- height: 16%;
+ .content_Box {
+ width: 97%;
+ height: 74%;
+ position: absolute;
display: flex;
- justify-content: space-between;
- align-items: center;
- .content_box {
- box-sizing: border-box;
- padding: 10px;
- padding-top: 30px;
- width: 33%;
- height: 100%;
+ flex-direction: column;
+ justify-content: space-around;
+ .cloumn_Box {
+ width: 100%;
+ height: 38%;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- .top_box {
- width: 70%;
- height: 90%;
- margin-left: 15%;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- padding-bottom: 15px;
- box-sizing: border-box;
- .Syslabel {
- font-family: sans-serif;
- font-size: 13px;
- color: white;
- text-align: left;
- // margin-left: 20px;
- }
- .details {
- font-family: sans-serif;
- font-size: 31px;
- color: white;
- text-align: center;
- letter-spacing: 2px;
- }
- #Sys_cpu_chart {
- width: 100%;
- height: 30%;
- }
- }
- .bottom_box {
- border-top: 1px solid rgb(202, 201, 204);
- text-align: center;
- color: white;
- font-size: 14px;
- }
- }
- }
-
- .left {
- box-sizing: border-box;
- padding: 10px;
- width: 100%;
- height: 37%;
- background: #fff;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- overflow: auto;
- }
- .title_box {
- font-weight: 800;
- }
- .pagination_box {
- text-align: center;
- }
- .chart_box {
- height: 36%;
- padding: 10px;
- background: #fff;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- box-sizing: border-box;
- .el-tabs {
- height: 100%;
- }
- /deep/ .el-tabs__content {
- height: calc(100% - 55px);
- }
- .el-tab-pane {
- height: 100%;
- }
- .gauge_box {
display: flex;
justify-content: space-between;
+ .flex_Box {
+ width: 30.5%;
+ height: 88%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ padding: 1%;
+ background: rgb(21, 20, 20);
+
+ .image1 {
+ width: 46px;
+ height: 20px;
+ float: left;
+ background: url('../../assets/img/systemMonitoring/鍥惧眰 38.png')
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ .image2 {
+ width: 34px;
+ height: 34px;
+ float: left;
+ background: url('../../assets/img/systemMonitoring/鍥惧眰 37.png')
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ .image3 {
+ width: 32px;
+ height: 32px;
+ float: left;
+ background: url('../../assets/img/systemMonitoring/鍥惧眰 40.png')
+ no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ .ycsBox {
+ width: 200px;
+ height: 200px;
+
+ margin-left: 30%;
+ background: url('../../assets/img/systemMonitoring/鍥惧眰 39.png')
+ no-repeat;
+ background-size: 100% 100%;
+ border: 1px;
+ }
+ .ycTltle {
+ width: 28px;
+ height: 47px;
+ font-size: 60px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #009cff;
+
+ margin-top: 61px;
+ margin-left: 88px;
+ }
+ }
+ .imageTitle {
+ float: left;
+ color: white;
+ margin-left: 10px;
+ }
+ .top_Box1 {
+ width: 96%;
+ height: 91%;
+ margin-top: 2%;
+ margin-left: 4%;
+ display: flex;
+ justify-content: space-between;
+ .top_box_left {
+ width: 59%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ .left_title {
+ width: 48%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ .height_title {
+ width: 100%;
+ height: 48%;
+ label {
+ color: white;
+ }
+ p {
+ color: white;
+ margin-top: 3%;
+ font-size: 24px;
+ }
+ }
+ }
+ }
+ .top_box_right {
+ width: 39%;
+ height: 100%;
+ }
+ }
+
+ .cloumn_Box1 {
width: 100%;
- height: 95%;
- position: relative;
- .input_box {
- position: absolute;
- top: 0;
- left: 0;
+ height: 58%;
+
+ display: flex;
+ justify-content: space-between;
+ .flex_Box1 {
+ width: 64%;
+ height: 92%;
+ padding: 1%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ background: rgb(21, 20, 20);
}
- #gauge_chart2 {
- width: 49%;
- height: 100%;
+ .flex_Box {
+ width: 30.5%;
+ height: 92%;
+ border: 1px solid rgb(202, 201, 204);
+ border-radius: 5px;
+ padding: 1%;
+ background: rgb(21, 20, 20);
}
- #gauge_chart1 {
- width: 49%;
- height: 100%;
- }
- #gauge_chart3 {
- width: 100%;
- height: 100%;
- }
- #gauge_chart4 {
- width: 100%;
- height: 100%;
- }
- #gauge_chart5 {
- width: 100%;
- height: 100%;
- }
- #line_chart {
- width: 100%;
- height: 100%;
- }
+ }
+ }
+ /deep/.el-tabs__item {
+ color: white;
+ }
+ /deep/.el-tabs__item.is-active {
+ color: #009cff;
+ }
+ /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+ /deep/ .el-table {
+ background-color: transparent;
+
+ th,
+ td {
+ background-color: transparent;
+ }
+ .el-table__expanded-cell {
+ background-color: transparent !important;
+ }
+
+ // 琛ㄥご鑳屾櫙鑹�
+ th.el-table__cell {
+ background-color: #303030;
+ color: #fff;
+ }
+ tr > td {
+ background-color: #303030;
+ color: #fff;
+ }
+
+ // hover鏁堟灉
+ tr:hover > td {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ }
+
+ tbody tr:hover {
+ background-color: rgba(255, 255, 255, 0.3) !important;
+ // text-align: center;
+ }
+
+ // 婊氬姩鏉″楂�
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+ }
+
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 5px;
+ /*婊氬姩鏉″搴�*/
+ height: 10px;
+ /*婊氬姩鏉￠珮搴�*/
+ }
+ /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-track {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ /*婊氬姩鏉＄殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+ border-radius: 10px;
+ }
+
+ /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ box-shadow: 0px 1px 3px #216fe6 inset;
+ border-radius: 6px;
+ background-color: #216fe6;
}
}
}
--
Gitblit v1.9.3