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 | 646 ++++++++++++++++++++++++++++------------------------------
1 files changed, 310 insertions(+), 336 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index bcd4cf3..abdc145 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -1,19 +1,69 @@
<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="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">
+ <div class="flex_Box subpage_Div">
<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">
@@ -22,17 +72,15 @@
<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>
@@ -40,141 +88,52 @@
<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 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 class="flex_Box subpage_Div">
<div>
<div class="image2"></div>
<div style="line-height: 32px" class="imageTitle">
- {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
+ {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
</div>
</div>
- <div
- id="Sys_cpu_chart"
- style="width: 100%; height: 86%; margin-top: 8%"
- ></div>
+ <div id="Sys_cpu_chart" style="width: 100%; height: 86%; margin-top: 8%"></div>
</div>
- <div class="flex_Box">
+ <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') }}
+ {{ $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-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="
- $t('operatManage.systemMonitoringObj.serviceResourceStatus')
- "
- name="second"
- >
- <div id="resUseChart" style="width: 995px; height: 310px"></div>
- </el-tab-pane>
- <el-tab-pane
- :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
- name="third"
- >
- <div
- id="userLoginChart"
- style="width: 995px; height: 310px"
- ></div>
- </el-tab-pane>
- <el-tab-pane
- :label="
- $t('operatManage.systemMonitoringObj.resourceOperationStatus')
- "
- 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">
- {{ $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>
</div>
</div>
@@ -308,7 +267,7 @@
@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"
@@ -351,7 +310,7 @@
@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"
@@ -363,8 +322,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: {
@@ -373,7 +332,7 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
- activeName: 'first',
+ activeName: "first",
ws: null,
tableData: [],
memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
@@ -396,7 +355,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) {
@@ -413,15 +372,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;
}
@@ -436,18 +395,24 @@
visualMap: [
{
show: false,
- type: 'continuous',
+ type: "continuous",
seriesIndex: 0,
},
],
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: { show: true },
+ },
+ },
title: [],
tooltip: {
- trigger: 'axis',
+ trigger: "axis",
},
xAxis: {
- type: 'category',
+ type: "category",
boundaryGap: false,
- data: ['', '', '', '', '', '', ''],
+ data: ["", "", "", "", "", "", ""],
},
yAxis: [
{
@@ -458,36 +423,44 @@
],
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: {
+ // 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 = 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 });
@@ -502,45 +475,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,
},
@@ -554,15 +527,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: {
@@ -570,13 +543,13 @@
},
label: {
show: false,
- position: 'center',
+ position: "center",
},
emphasis: {
label: {
show: true,
- fontSize: '40',
- fontWeight: 'bold',
+ fontSize: "40",
+ fontWeight: "bold",
},
},
labelLine: {
@@ -585,16 +558,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)",
},
},
],
@@ -607,50 +580,58 @@
},
],
};
+ var dome = document.getElementById("shuiwen")
+ if (dome) {
+ let myChart1 = this.$echarts.init(dome);
+ myChart1.setOption(options);
+ window.addEventListener("resize", function () {
+ myChart1.resize();
+ });
+ }
- let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
- myChart1.setOption(options);
- 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 },
+ },
},
legend: {
- top: '5%',
- left: 'center',
+ top: "5%",
+ left: "center",
textStyle: {
fontSize: 18, //瀛椾綋澶у皬
- color: '#ffffff', //瀛椾綋棰滆壊
},
},
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: {
@@ -660,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();
});
},
@@ -679,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: {
@@ -696,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);
},
@@ -727,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,
@@ -749,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);
},
};
@@ -801,95 +816,117 @@
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
.systemMonitoring_box {
- border-radius: 10px;
- height: 100%;
- box-sizing: border-box;
+ height: 98%;
+ 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: 97%;
- height: 74%;
- position: absolute;
+ width: 100%;
+ 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: 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: 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: 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: 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;
+ .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;
}
- .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;
+ padding: 1%;
+ height: 80%;
- margin-top: 20px;
-
- text-align: center;
+ display: flex;
+ justify-content: center;
}
}
+
.imageTitle {
float: left;
- 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;
+
+ line-height: 49px;
+
+ // margin-top: 20px;
+
+ // text-align: center;
+ }
+
.top_Box1 {
width: 96%;
height: 91%;
@@ -897,31 +934,32 @@
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%;
@@ -934,86 +972,22 @@
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);
}
+
.flex_Box {
width: 30.5%;
height: 92%;
- border: 1px solid rgb(202, 201, 204);
+
border-radius: 5px;
padding: 1%;
- background: rgb(21, 20, 20);
}
- }
- }
- /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