From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 29 三月 2024 09:57:55 +0800
Subject: [PATCH] 代码更新
---
src/views/maintenance/systemMonitoring.vue | 977 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 598 insertions(+), 379 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index cfdbb11..abdc145 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,13 +1,143 @@
<template>
<div class="systemMonitoring_box">
- <My-bread
- :list="[
- `${$t('operatManage.operatManage')}`,
- `${$t('operatManage.systemMonitoring')}`,
- ]"
- ></My-bread>
+ <My-bread :list="[
+ `${$t('operatManage.operatManage')}`,
+ `${$t('operatManage.systemMonitoring')}`,
+ ]"></My-bread>
<el-divider />
- <div class="inform_box">
+ <div class="content_Box">
+ <div class="cloumn_Box1">
+ <div class="flex_Box1 subpage_Div">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane :label="$t('operatManage.systemMonitoringObj.abnormalResources')" name="first">
+ <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="$t('operatManage.systemMonitoringObj.serviceResourceStatus')
+ " name="second">
+ <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>
+ </el-tab-pane>
+ <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceOperationStatus')
+ " name="fourth">
+ <div id="operateCountChart" style="width: 101vh; height: 30vh"></div>
+ </el-tab-pane>
+ </el-tabs>
+ </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>
+ </div>
+ <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">
+ <div class="flex_Box subpage_Div">
+ <div style="width: 100%; height: 20px">
+ <div class="image1"></div>
+ <div class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
+ </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>
+ {{
+ $t("operatManage.systemMonitoringObj.usageRate")
+ }}</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>
+ {{
+ $t("operatManage.systemMonitoringObj.remainingMemory")
+ }}</label>
+ <p>{{ memInfo.remainMem }}</p>
+ </div>
+ </div>
+ </div>
+ <div id="fathershuiWen" class="top_box_right">
+ <div id="shuiwen"></div>
+ </div>
+ </div>
+ </div>
+ <div class="flex_Box subpage_Div">
+ <div>
+ <div class="image2"></div>
+ <div style="line-height: 32px" class="imageTitle">
+ {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
+ </div>
+ </div>
+ <div id="Sys_cpu_chart" style="width: 100%; height: 86%; margin-top: 8%"></div>
+ </div>
+ <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>
+ </div>
+ <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>
+ <!-- <div class="inform_box">
<div class="content_box">
<div class="top_box">
<div style="width: 100%; height: 100%">
@@ -36,21 +166,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 +194,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 +239,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,18 +262,18 @@
>
</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"
:current-page="currentPage4"
- :page-sizes="[10, 20, 30, 40]"
+ :page-sizes="[10, 20, 50, 100]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="4"
>
</el-pagination>
- </div> -->
+ </div>
</div>
<div class="left">
@@ -202,20 +310,20 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
- :page-sizes="[10, 20, 30, 40]"
+ :page-sizes="[10, 20, 50, 100]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="4"
>
</el-pagination>
- </div> -->
- </div>
+ </div>
+ </div> -->
</div>
</template>
<script>
-import MyBread from '../../components/MyBread.vue';
-import 'echarts-liquidfill';
+import MyBread from "../../components/MyBread.vue";
+import "echarts-liquidfill";
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -224,10 +332,10 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
- activeName: 'first',
+ 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 +354,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;
@@ -265,234 +372,266 @@
},
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;
}
},
lineChart1() {
- let option = {
- grid: {
- top: 0,
- left: '0%',
- right: '4%',
- bottom: '0%',
- containLabel: true,
- },
- tooltip: {
- trigger: 'axis',
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['', '', '', '', '', '', ''],
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ const valueList = this.echartData.map(function (item) {
+ return item[1];
+ });
+
+ var option = {
+ // Make gradient line here
+ visualMap: [
+ {
+ show: false,
+ type: "continuous",
+ seriesIndex: 0,
+ },
+ ],
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: { show: true },
},
},
+ title: [],
+ tooltip: {
+ trigger: "axis",
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: ["", "", "", "", "", "", ""],
+ },
+ yAxis: [
+ {
+ axisLabel: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ },
+ },
+ ],
+ grid: [
+ {
+ top: "10%",
+ bottom: "10%",
+ left: "10%",
+ right: "10%",
+ },
+ ],
series: [
{
- data: this.echartData,
- type: 'line',
- areaStyle: {},
+ type: "line",
+ showSymbol: false,
+ data: valueList,
+ // itemStyle: {
+ // normal: {
+ // color: "#009cff", //鏀瑰彉鎶樼嚎鐐圭殑棰滆壊
+ // lineStyle: {
+ // color: "#009cff", //鏀瑰彉鎶樼嚎棰滆壊
+ // },
+ // },
+ // }
},
],
};
+
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 = 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|%}',
- textStyle: {
- fontSize: 15,
- fontFamily: 'Microsoft Yahei',
- fontWeight: 'normal',
- color: 'black',
- rich: {
- a: {
- fontSize: 15,
- },
- },
- },
- x: 'center',
- y: '35%',
- },
- graphic: [
- {
- type: 'group',
- left: 'center',
+ var data = { name: "1111", value: parseFloat(a) / 100 };
+ var list = [];
+ let value = data.value;
+ list.push({ name: data.name, value: data.value });
- 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,
- },
- },
- outline: {
- 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',
- },
- },
- 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,
- },
- },
- label: {
- normal: {
- formatter: '',
- },
- },
- },
- ],
- };
-
- let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
- myChart1.setOption(option);
- window.addEventListener('resize', function () {
- myChart1.resize();
- });
- },
- lineChart3() {
- var data = [
- { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
- { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
- ];
- var option = {
+ 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: {
- trigger: 'item',
- },
- legend: {
- top: '5%',
- left: 'center',
+ show: false,
+ trigger: "item", // 瑙﹀彂绫诲瀷, 鏁版嵁椤瑰浘褰㈣Е鍙戯紝涓昏鍦ㄦ暎鐐瑰浘锛岄ゼ鍥剧瓑鏃犵被鐩酱鐨勫浘琛ㄤ腑浣跨敤銆�
+ textStyle: {
+ show: false,
+ },
+ formatter: function (value) {
+ return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
+ },
},
series: [
{
- name: ' ',
- type: 'pie',
- radius: ['40%', '70%'],
+ type: "liquidFill",
+ name: " ",
+ radius: "40%",
+ center: ["30%", "30%"],
+ shape: "circle",
+ phase: 0,
+ direction: "right",
+ outline: {
+ show: true,
+ borderDistance: 0, // 杈规绾夸笌鍥捐〃鐨勮窛绂� 鏁板瓧
+ itemStyle: {
+ opacity: 1,
+ borderWidth: 0,
+ borderColor: "#2bf9ed",
+ },
+ },
+ // 鍥惧舰鏍峰紡
+ itemStyle: {
+ 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,
- borderColor: '#fff',
- borderWidth: 2,
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ 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,
+ },
+ },
+ ],
+ };
+ var dome = document.getElementById("shuiwen")
+ if (dome) {
+ let myChart1 = this.$echarts.init(dome);
+ myChart1.setOption(options);
+ window.addEventListener("resize", function () {
+ myChart1.resize();
+ });
+ }
+
+ },
+ lineChart3() {
+ var data = [
+ { name: "鍙敤璧勬簮", value: this.resUseCount.resAbleCount },
+ { name: "涓嶅彲鐢ㄨ祫婧�", value: this.resUseCount.resUnableCount },
+ ];
+ var option = {
+ tooltip: {
+ trigger: "item",
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: { show: true },
+ },
+ },
+ legend: {
+ top: "5%",
+ left: "center",
+ textStyle: {
+ fontSize: 18, //瀛椾綋澶у皬
+ },
+ },
+ series: [
+ {
+ name: " ",
+ type: "pie",
+ radius: ["40%", "70%"],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: "#fff",
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ position: "center",
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -502,9 +641,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();
});
},
@@ -521,15 +660,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: {
@@ -538,24 +677,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);
},
@@ -569,20 +708,26 @@
var option = {
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
axisPointer: {
- type: 'shadow',
+ type: "shadow",
+ },
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ 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,
@@ -591,51 +736,79 @@
],
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);
},
+ isJSON(str) {
+ if (typeof str == 'string') {
+ try {
+ var obj = JSON.parse(str);
+ if (typeof obj == 'object' && obj) {
+ return true;
+ } else {
+ return false;
+ }
+
+ } catch (e) {
+
+ return false;
+ }
+ }
+
+ }
+
},
created() {
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); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
- var data = JSON.parse(msg.data);
- console.log(data);
- if (data.userInfo != undefined) {
- that.SetTableData1(data);
- } else if (data.resInfo != undefined) {
- that.SetTableData2(data);
- } else if (data.operateCount != undefined) {
- that.SetTableData3(data);
+ var obj = this.isJSON(msg.data);
+ if (obj) {
+ var data = JSON.parse(msg.data);
+ if (data.userInfo != undefined) {
+ that.SetTableData1(data);
+ } else if (data.resInfo != undefined) {
+ that.SetTableData2(data);
+ } else if (data.operateCount != undefined) {
+ that.SetTableData3(data);
+ }
}
+
};
},
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);
},
};
@@ -643,131 +816,177 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.systemMonitoring_box {
- background: rgb(240, 242, 245);
- border-radius: 10px;
- height: 100%;
- padding: 10px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- .inform_box {
- height: 16%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .content_box {
- box-sizing: border-box;
- padding: 10px;
- padding-top: 30px;
- width: 33%;
- height: 100%;
- background: #fff;
- 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: gray;
- text-align: left;
- // margin-left: 20px;
- }
- .details {
- font-family: sans-serif;
- font-size: 31px;
- color: #1b1e21;
- 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: #6c757d;
- font-size: 14px;
- }
- }
+ height: 98%;
+ width: 98%;
+ padding: 1%;
+
+ .table_b .el-table,
+ .table_b .el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent !important;
}
- .left {
- box-sizing: border-box;
- padding: 10px;
+ .table_b .el-table /deep/ th,
+ .table_b .el-table /deep/ tr {
+ background-color: transparent !important;
+ }
+
+ .content_Box {
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 {
+ height: 90%;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+
+ .cloumn_Box {
+ width: 100%;
+ height: 38%;
+
display: flex;
justify-content: space-between;
+
+ .flex_Box {
+ width: 30.5%;
+ height: 88%;
+
+ border-radius: 5px;
+ padding: 1%;
+
+ .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: 495px;
+ height: 182px;
+ background: url("../../assets/img/systemMonitoring/鍥惧眰 39.png") no-repeat;
+ background-size: 100% 100%;
+ border: 1px;
+ display: flex;
+ align-items: center;
+ }
+
+ .ycContent {
+ width: 100%;
+ padding: 1%;
+ height: 80%;
+
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .imageTitle {
+ float: left;
+
+ margin-left: 10px;
+ }
+
+ .ycTltle {
width: 100%;
- height: 95%;
- position: relative;
- .input_box {
- position: absolute;
- top: 0;
- left: 0;
+ 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;
+
+ line-height: 49px;
+
+ // margin-top: 20px;
+
+ // text-align: center;
+ }
+
+ .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%;
+
+ p {
+ margin-top: 3%;
+ font-size: 24px;
+ }
+ }
+ }
}
- #gauge_chart2 {
- width: 49%;
+
+ .top_box_right {
+ width: 39%;
height: 100%;
}
- #gauge_chart1 {
- width: 49%;
- height: 100%;
+ }
+
+ .cloumn_Box1 {
+ width: 100%;
+ height: 58%;
+
+ display: flex;
+ justify-content: space-between;
+
+ .flex_Box1 {
+ width: 64%;
+ height: 92%;
+ padding: 1%;
+
+ border-radius: 5px;
}
- #gauge_chart3 {
- width: 100%;
- height: 100%;
- }
- #gauge_chart4 {
- width: 100%;
- height: 100%;
- }
- #gauge_chart5 {
- width: 100%;
- height: 100%;
- }
- #line_chart {
- width: 100%;
- height: 100%;
+
+ .flex_Box {
+ width: 30.5%;
+ height: 92%;
+
+ border-radius: 5px;
+ padding: 1%;
}
}
}
--
Gitblit v1.9.3