From c40e3de17653a10a06ead765813783a5614a32ce Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期四, 16 二月 2023 17:40:43 +0800
Subject: [PATCH] 调整运维管理部分页面格式
---
src/views/maintenance/systemMonitoring.vue | 397 ++++++++++++++++++++++++++------------------------------
1 files changed, 187 insertions(+), 210 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index 0abf4a6..649ea4a 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,47 +1,47 @@
<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_Box1">
<div class="flex_Box1 subpage_Div">
- <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: 100%"
- >
- <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>
+ <div class="table_b">
+ <el-table :data="resInfo" style="width: 100%; height: 100%">
+ <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>
+ </div>
</el-tab-pane>
<el-tab-pane
:label="
@@ -49,21 +49,13 @@
"
name="second"
>
-
- <div
- id="resUseChart"
- style="width:101vh; height: 30vh; "
- ></div>
-
+ <div id="resUseChart" style="width: 101vh; height: 30vh"></div>
</el-tab-pane>
<el-tab-pane
:label="$t('operatManage.systemMonitoringObj.userloginStatus')"
name="third"
>
- <div
- id="userLoginChart"
- style="width:101vh; height: 30vh; "
- ></div>
+ <div id="userLoginChart" style="width: 101vh; height: 30vh"></div>
</el-tab-pane>
<el-tab-pane
:label="
@@ -73,48 +65,43 @@
>
<div
id="operateCountChart"
- style="width:101vh; height: 30vh; "
+ style="width: 101vh; height: 30vh"
></div>
</el-tab-pane>
</el-tabs>
</div>
- <div class="flex_Box subpage_Div">
+ <div class="flex_Box subpage_Div" style="overflow: auto;padding-bottom:20px">
<div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.onlinePersonnel") }}
</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 class="table_b">
+ <el-table :data="tableData" style="width: 100%">
+ <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="cloumn_Box">
@@ -122,7 +109,7 @@
<div style="width: 100%; height: 20px">
<div class="image1"></div>
<div class="imageTitle">
- {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
+ {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
</div>
</div>
<div class="top_Box1">
@@ -131,15 +118,17 @@
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.haveBeenUsed')
- }}</label>
+ $t("operatManage.systemMonitoringObj.haveBeenUsed")
+ }}</label
+ >
<p>{{ memInfo.use }}</p>
</div>
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.usageRate')
- }}</label>
+ $t("operatManage.systemMonitoringObj.usageRate")
+ }}</label
+ >
<p>{{ memInfo.usage }}</p>
</div>
</div>
@@ -147,23 +136,22 @@
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.totalMemory')
- }}</label>
+ $t("operatManage.systemMonitoringObj.totalMemory")
+ }}</label
+ >
<p>{{ memInfo.totalMem }}</p>
</div>
<div class="height_title">
<label>
{{
- $t('operatManage.systemMonitoringObj.remainingMemory')
- }}</label>
+ $t("operatManage.systemMonitoringObj.remainingMemory")
+ }}</label
+ >
<p>{{ memInfo.remainMem }}</p>
</div>
</div>
</div>
- <div
- id="fathershuiWen"
- class="top_box_right"
- >
+ <div id="fathershuiWen" class="top_box_right">
<div id="shuiwen"></div>
</div>
</div>
@@ -171,11 +159,8 @@
<div class="flex_Box subpage_Div">
<div>
<div class="image2"></div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
</div>
</div>
<div
@@ -186,28 +171,24 @@
<div class="flex_Box subpage_Div">
<div style="width: 100%; height: 34px">
<div class="image3"></div>
- <div
- style="line-height: 32px"
- class="imageTitle"
- >
- {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.heteroconstant") }}
</div>
</div>
<div class="ycContent">
<div class="ycsBox">
- <div style="width:100%;height:100%">
+ <div style="width: 100%; height: 100%">
<div class="ycTltle">{{ resInfoCount }}</div>
<div class="heteroTitle">
- {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ {{
+ $t("operatManage.systemMonitoringObj.numberOfExceptions")
+ }}
</div>
</div>
-
</div>
</div>
-
</div>
</div>
-
</div>
<!-- <div class="inform_box">
<div class="content_box">
@@ -394,8 +375,8 @@
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
-import 'echarts-liquidfill';
+import MyBread from "../../components/MyBread.vue";
+import "echarts-liquidfill";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -404,7 +385,7 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
- activeName: 'first',
+ activeName: "first",
ws: null,
tableData: [],
memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
@@ -427,7 +408,7 @@
this.echartData.splice(0, 1);
}
this.lineChart2(this.memInfo.usage);
- this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
+ this.echartData.push([" ", parseFloat(res.cpuInfo.cpuSysUsage)]);
this.lineChart1();
},
SetTableData2(res) {
@@ -444,15 +425,15 @@
},
handleClick(tab, event) {
switch (tab) {
- case 'first':
+ case "first":
break;
- case 'second':
+ case "second":
this.lineChart3();
break;
- case 'third':
+ case "third":
this.lineChart4();
break;
- case 'fourth':
+ case "fourth":
this.lineChart5();
break;
}
@@ -467,26 +448,24 @@
visualMap: [
{
show: false,
- type: 'continuous',
+ type: "continuous",
seriesIndex: 0,
},
],
toolbox: {
show: true,
feature: {
-
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
title: [],
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['', '', '', '', '', '', ''],
-
+ data: ["", "", "", "", "", "", ""],
},
yAxis: [
{
@@ -497,15 +476,15 @@
],
grid: [
{
- top: '10%',
- bottom: '10%',
- left: '10%',
- right: '10%',
+ top: "10%",
+ bottom: "10%",
+ left: "10%",
+ right: "10%",
},
],
series: [
{
- type: 'line',
+ type: "line",
showSymbol: false,
data: valueList,
// itemStyle: {
@@ -516,29 +495,25 @@
// },
// },
// }
-
-
},
],
};
let myChart = this.$echarts.init(
- document.getElementById('Sys_cpu_chart')
+ document.getElementById("Sys_cpu_chart")
);
myChart.setOption(option);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart.resize();
});
},
lineChart2(res) {
-
-
var a = 0;
if (res != 0) {
- a = res.split('%').join('');
+ a = res.split("%").join("");
}
- var data = { name: '1111', value: parseFloat(a) / 100 };
+ var data = { name: "1111", value: parseFloat(a) / 100 };
var list = [];
let value = data.value;
list.push({ name: data.name, value: data.value });
@@ -553,45 +528,45 @@
// 鎻愮ず妗嗙粍浠�
tooltip: {
show: false,
- trigger: 'item', // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
+ trigger: "item", // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
textStyle: {
show: false,
},
formatter: function (value) {
- return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
+ return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
},
},
series: [
{
- type: 'liquidFill',
- name: ' ',
- radius: '40%',
- center: ['30%', '30%'],
- shape: 'circle',
+ type: "liquidFill",
+ name: " ",
+ radius: "40%",
+ center: ["30%", "30%"],
+ shape: "circle",
phase: 0,
- direction: 'right',
+ direction: "right",
outline: {
show: true,
borderDistance: 0, // 杈规绾夸笌鍥捐〃鐨勮窛绂� 鏁板瓧
itemStyle: {
opacity: 1,
borderWidth: 0,
- borderColor: '#2bf9ed',
+ borderColor: "#2bf9ed",
},
},
// 鍥惧舰鏍峰紡
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#c5e87e' }, //鏌卞浘娓愬彉鑹�
- { offset: 0.5, color: '#2bf9ed' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ { 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' }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
+ { offset: 0, color: "#2bf9ed" }, //鏌卞浘娓愬彉鑹�
+ { offset: 0.4, color: "#44C0C1" }, //鏌卞浘娓愬彉鑹� //鏌卞浘娓愬彉鑹�
]),
opacity: 0.5,
},
@@ -605,15 +580,15 @@
label: {
fontSize: 40,
fontWeight: 600,
- color: '#fff',
+ color: "#fff",
},
data: list,
},
{
- name: 'Access From',
- type: 'pie',
- radius: ['43%', '50%'],
- center: ['30%', '30%'],
+ name: "Access From",
+ type: "pie",
+ radius: ["43%", "50%"],
+ center: ["30%", "30%"],
startAngle: 340,
avoidLabelOverlap: false,
itemStyle: {
@@ -621,13 +596,13 @@
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -636,16 +611,16 @@
data: [
{
value: 0.4,
- name: 'Direct',
+ name: "Direct",
itemStyle: {
- color: '#2bf9ed',
+ color: "#2bf9ed",
},
},
{
value: 0.6,
- name: 'Direct',
+ name: "Direct",
itemStyle: {
- color: 'rgba(240, 248, 255, 0)',
+ color: "rgba(240, 248, 255, 0)",
},
},
],
@@ -659,55 +634,54 @@
],
};
- let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
+ let myChart1 = this.$echarts.init(document.getElementById("shuiwen"));
myChart1.setOption(options);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart1.resize();
});
},
lineChart3() {
var data = [
- { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
- { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
+ { name: "鍙敤璧勬簮", value: this.resUseCount.resAbleCount },
+ { name: "涓嶅彲鐢ㄨ祫婧�", value: this.resUseCount.resUnableCount },
];
var option = {
tooltip: {
- trigger: 'item',
+ trigger: "item",
},
toolbox: {
show: true,
feature: {
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
legend: {
- top: '5%',
- left: 'center',
+ top: "5%",
+ left: "center",
textStyle: {
fontSize: 18, //瀛椾綋澶у皬
-
},
},
series: [
{
- name: ' ',
- type: 'pie',
- radius: ['40%', '70%'],
+ name: " ",
+ type: "pie",
+ radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
- borderColor: '#fff',
+ borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -717,9 +691,9 @@
},
],
};
- let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
+ let myChart2 = this.$echarts.init(document.getElementById("resUseChart"));
myChart2.setOption(option);
- window.addEventListener('resize', function () {
+ window.addEventListener("resize", function () {
myChart2.resize();
});
},
@@ -736,15 +710,15 @@
show: false,
},
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
},
legend: {
show: false,
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
},
toolbox: {
@@ -753,24 +727,24 @@
},
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
data: data1,
},
yAxis: {
- type: 'value',
+ type: "value",
},
series: [
{
- name: '',
- type: 'line',
- stack: 'Total',
+ name: "",
+ type: "line",
+ stack: "Total",
data: data2,
},
],
};
let myChart3 = this.$echarts.init(
- document.getElementById('userLoginChart')
+ document.getElementById("userLoginChart")
);
myChart3.setOption(option);
},
@@ -784,27 +758,26 @@
var option = {
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow',
+ type: "shadow",
},
},
toolbox: {
show: true,
feature: {
-
- saveAsImage: { show: true }
- }
+ saveAsImage: { show: true },
+ },
},
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
containLabel: true,
},
xAxis: [
{
- type: 'category',
+ type: "category",
data: data1,
axisTick: {
alignWithLabel: true,
@@ -813,20 +786,20 @@
],
yAxis: [
{
- type: 'value',
+ type: "value",
},
],
series: [
{
- name: 'Direct',
- type: 'bar',
- barWidth: '60%',
+ name: "Direct",
+ type: "bar",
+ barWidth: "60%",
data: data2,
},
],
};
let myChart4 = this.$echarts.init(
- document.getElementById('operateCountChart')
+ document.getElementById("operateCountChart")
);
myChart4.setOption(option);
},
@@ -835,13 +808,13 @@
if (Window.ws != null) {
Window.ws.close();
Window.ws.onclose = () => {
- console.log('鏈嶅姟鍣ㄥ叧闂�');
+ console.log("鏈嶅姟鍣ㄥ叧闂�");
};
Window.ws = null;
}
Window.ws = new WebSocket(socketUrl);
- Window.ws.option = () => { };
+ Window.ws.option = () => {};
var that = this;
Window.ws.onmessage = (msg) => {
// console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
@@ -860,14 +833,10 @@
mounted() {
var mywidth = $("#fathershuiWen").width();
var mysright = $("#fathershuiWen").height();
- var width = (mywidth * 1.5) + "px"
- var height = (mysright * 1.5) + "px"
+ var width = mywidth * 1.5 + "px";
+ var height = mysright * 1.5 + "px";
$("#shuiwen").width(width);
$("#shuiwen").height(height);
-
-
-
-
this.lineChart2(0);
},
@@ -880,6 +849,14 @@
width: 98%;
padding: 1%;
+ .table_b .el-table,
+ .table_b .el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent !important;
+ }
+ .table_b .el-table /deep/ th,
+ .table_b .el-table /deep/ tr {
+ background-color: transparent !important;
+ }
.content_Box {
width: 100%;
height: 90%;
--
Gitblit v1.9.3