From 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 16 一月 2023 10:35:15 +0800
Subject: [PATCH] 廊坊代码更新
---
src/views/maintenance/systemMonitoring.vue | 179 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 114 insertions(+), 65 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index bcd4cf3..01768c4 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,11 +1,9 @@
<template>
<div class="systemMonitoring_box">
- <My-bread
- :list="[
+ <My-bread :list="[
`${$t('operatManage.operatManage')}`,
`${$t('operatManage.systemMonitoring')}`,
- ]"
- ></My-bread>
+ ]"></My-bread>
<el-divider />
<div class="content_Box">
<div class="cloumn_Box">
@@ -23,16 +21,14 @@
<label>
{{
$t('operatManage.systemMonitoringObj.haveBeenUsed')
- }}</label
- >
+ }}</label>
<p>{{ memInfo.use }}</p>
</div>
<div class="height_title">
<label>
{{
$t('operatManage.systemMonitoringObj.usageRate')
- }}</label
- >
+ }}</label>
<p>{{ memInfo.usage }}</p>
</div>
</div>
@@ -41,29 +37,33 @@
<label>
{{
$t('operatManage.systemMonitoringObj.totalMemory')
- }}</label
- >
+ }}</label>
<p>{{ memInfo.totalMem }}</p>
</div>
<div class="height_title">
<label>
{{
$t('operatManage.systemMonitoringObj.remainingMemory')
- }}</label
- >
+ }}</label>
<p>{{ memInfo.remainMem }}</p>
</div>
</div>
</div>
- <div class="top_box_right">
- <div id="shuiwen" style="width: 300px; height: 300px"></div>
+ <div
+ id="fathershuiWen"
+ class="top_box_right"
+ >
+ <div id="shuiwen"></div>
</div>
</div>
</div>
<div class="flex_Box">
<div>
<div class="image2"></div>
- <div style="line-height: 32px" class="imageTitle">
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
{{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
</div>
</div>
@@ -75,25 +75,41 @@
<div class="flex_Box">
<div style="width: 100%; height: 34px">
<div class="image3"></div>
- <div style="line-height: 32px" class="imageTitle">
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
{{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
</div>
</div>
- <div class="ycsBox">
- <div class="ycTltle">{{ resInfoCount }}</div>
- <div class="heteroTitle">
- {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ <div class="ycContent">
+ <div class="ycsBox">
+ <div style="width:100%;height:100%">
+ <div class="ycTltle">{{ resInfoCount }}</div>
+ <div class="heteroTitle">
+ {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ </div>
+ </div>
+
</div>
</div>
+
</div>
</div>
<div class="cloumn_Box1">
<div class="flex_Box1">
- <el-tabs v-model="activeName" @tab-click="handleClick">
+ <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
+ :data="resInfo"
+ style="width: 100%; height: 310px"
+ >
<el-table-column
prop="id"
:label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -114,15 +130,21 @@
:label="$t('operatManage.systemMonitoringObj.abnormaltime')"
show-overflow-tooltip
>
- </el-table-column> </el-table
- ></el-tab-pane>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
<el-tab-pane
:label="
$t('operatManage.systemMonitoringObj.serviceResourceStatus')
"
name="second"
>
- <div id="resUseChart" style="width: 995px; height: 310px"></div>
+
+ <div
+ id="resUseChart"
+ style="width:101vh; height: 30vh; "
+ ></div>
+
</el-tab-pane>
<el-tab-pane
:label="$t('operatManage.systemMonitoringObj.userloginStatus')"
@@ -130,7 +152,7 @@
>
<div
id="userLoginChart"
- style="width: 995px; height: 310px"
+ style="width:101vh; height: 30vh; "
></div>
</el-tab-pane>
<el-tab-pane
@@ -138,20 +160,28 @@
$t('operatManage.systemMonitoringObj.resourceOperationStatus')
"
name="fourth"
- ><div
+ >
+ <div
id="operateCountChart"
- style="width: 995px; height: 310px"
- ></div
- ></el-tab-pane>
+ style="width:101vh; height: 30vh; "
+ ></div>
+ </el-tab-pane>
</el-tabs>
</div>
<div class="flex_Box">
<div>
- <div style="line-height: 32px" class="imageTitle">
+ <div
+ style="line-height: 32px"
+ class="imageTitle"
+ >
{{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
</div>
</div>
- <el-table :data="tableData" style="width: 100%" height="90%">
+ <el-table
+ :data="tableData"
+ style="width: 100%"
+ height="90%"
+ >
<el-table-column
align="center"
type="index"
@@ -482,6 +512,8 @@
});
},
lineChart2(res) {
+
+
var a = 0;
if (res != 0) {
a = res.split('%').join('');
@@ -777,7 +809,7 @@
}
Window.ws = new WebSocket(socketUrl);
- Window.ws.option = () => {};
+ Window.ws.option = () => { };
var that = this;
Window.ws.onmessage = (msg) => {
// console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
@@ -794,6 +826,17 @@
},
mounted() {
+ var mywidth = $("#fathershuiWen").width();
+ var mysright = $("#fathershuiWen").height();
+ var width = (mywidth * 1.5) + "px"
+ var height = (mysright * 1.5) + "px"
+ $("#shuiwen").width(width);
+ $("#shuiwen").height(height);
+
+
+
+
+
this.lineChart2(0);
},
};
@@ -801,12 +844,13 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.systemMonitoring_box {
- border-radius: 10px;
- height: 100%;
- box-sizing: border-box;
+ height: 98%;
+ width: 98%;
+ padding: 1%;
+ position: absolute;
.content_Box {
width: 97%;
- height: 74%;
+ height: 85%;
position: absolute;
display: flex;
flex-direction: column;
@@ -829,7 +873,7 @@
width: 46px;
height: 20px;
float: left;
- background: url('../../assets/img/systemMonitoring/鍥惧眰 38.png')
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 38.png")
no-repeat;
background-size: 100% 100%;
}
@@ -837,7 +881,7 @@
width: 34px;
height: 34px;
float: left;
- background: url('../../assets/img/systemMonitoring/鍥惧眰 37.png')
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 37.png")
no-repeat;
background-size: 100% 100%;
}
@@ -845,7 +889,7 @@
width: 32px;
height: 32px;
float: left;
- background: url('../../assets/img/systemMonitoring/鍥惧眰 40.png')
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 40.png")
no-repeat;
background-size: 100% 100%;
}
@@ -853,36 +897,19 @@
.ycsBox {
width: 200px;
height: 200px;
-
- margin-left: 30%;
- background: url('../../assets/img/systemMonitoring/鍥惧眰 39.png')
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png")
no-repeat;
background-size: 100% 100%;
border: 1px;
+ display: flex;
+ align-items: center;
}
- .ycTltle {
- width: 28px;
- height: 47px;
- font-size: 60px;
- font-family: Microsoft YaHei;
- font-weight: 300;
- color: #009cff;
-
- margin-top: 61px;
- margin-left: 88px;
- }
- .heteroTitle {
+ .ycContent {
width: 100%;
- height: 16px;
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 300;
- color: #ffffff;
- line-height: 49px;
-
- margin-top: 20px;
-
- text-align: center;
+ padding: 1%;
+ height: 80%;
+ display: flex;
+ justify-content: center;
}
}
.imageTitle {
@@ -890,6 +917,28 @@
color: white;
margin-left: 10px;
}
+ .ycTltle {
+ width: 100%;
+ margin-top: 8%;
+ font-size: 60px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #009cff;
+ text-align: center;
+ }
+ .heteroTitle {
+ width: 100%;
+ text-align: center;
+ font-size: 16px;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #ffffff;
+ line-height: 49px;
+
+ // margin-top: 20px;
+
+ // text-align: center;
+ }
.top_Box1 {
width: 96%;
height: 91%;
--
Gitblit v1.9.3