<template>
|
<div class="systemMonitoring_box">
|
<My-bread
|
:list="[
|
`${$t('operatManage.operatManage')}`,
|
`${$t('operatManage.systemMonitoring')}`,
|
]"
|
></My-bread>
|
<el-divider />
|
<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">
|
{{ $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 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">
|
{{ $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">
|
<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="ycsBox">
|
<div class="ycTltle">{{ resInfoCount }}</div>
|
<div class="heteroTitle">
|
{{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
|
</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>
|
<!-- <div class="inform_box">
|
<div class="content_box">
|
<div class="top_box">
|
<div style="width: 100%; height: 100%">
|
<div
|
style="width: 30%; height: 100%; float: left; margin-left: 20%"
|
>
|
<div class="Syslabel">
|
<p style="line-height: 25px">
|
{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
|
{{ memInfo.use }}
|
</p>
|
<br />
|
<p style="line-height: 25px">
|
{{ $t('operatManage.systemMonitoringObj.totalMemory') }}
|
{{ memInfo.totalMem }}
|
</p>
|
</div>
|
</div>
|
<div
|
id="shuiwen"
|
style="
|
width: 40%;
|
height: 100%;
|
|
float: left;
|
"
|
></div>
|
</div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.systemMemory') }}
|
</div>
|
</div>
|
<div class="content_box">
|
<div class="top_box">
|
<div class="Syslabel">
|
{{ $t('operatManage.systemMonitoringObj.CPUusage') }}
|
</div>
|
<div class="details">{{ cpuInfo.cpuSysUsage }}</div>
|
<div id="Sys_cpu_chart"></div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.CPUsystemUsage') }}
|
</div>
|
</div>
|
<div class="content_box">
|
<div class="top_box">
|
<div class="Syslabel">
|
{{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
|
</div>
|
<div class="details">{{ resInfoCount }}</div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
|
</div>
|
</div>
|
</div>
|
<div class="chart_box">
|
<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%">
|
<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: 1515px; height: 243px"></div>
|
</el-tab-pane>
|
<el-tab-pane label="用户登录状态" name="third">
|
<div id="userLoginChart" style="width: 1515px; height: 243px"></div>
|
</el-tab-pane>
|
<el-tab-pane label="资源操作状态" name="fourth"
|
><div
|
id="operateCountChart"
|
style="width: 1515px; height: 243px"
|
></div
|
></el-tab-pane>
|
</el-tabs>
|
<!-- <p class="title_box">
|
{{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
|
</p> -->
|
<!-- <el-table :data="resInfo" style="width: 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 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-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="4"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
|
<div class="left">
|
<p class="title_box">
|
{{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
|
</p>
|
<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 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-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="4"
|
>
|
</el-pagination>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import MyBread from '../../components/MyBread.vue';
|
import 'echarts-liquidfill';
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
data() {
|
//这里存放数据
|
return {
|
activeName: 'first',
|
ws: null,
|
tableData: [],
|
memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
|
cpuInfo: { cpuSysUsage: 0 },
|
resInfo: [],
|
resInfoCount: 0,
|
echartData: [],
|
resUseCount: {},
|
userLoginCount: [],
|
operateCount: [],
|
};
|
},
|
//方法集合
|
methods: {
|
SetTableData1(res) {
|
this.tableData = res.userInfo;
|
this.memInfo = res.memInfo;
|
this.cpuInfo = res.cpuInfo;
|
if (this.echartData.length == 7) {
|
this.echartData.splice(0, 1);
|
}
|
this.lineChart2(this.memInfo.usage);
|
this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
|
this.lineChart1();
|
},
|
SetTableData2(res) {
|
this.resInfo = res.resInfo;
|
this.resInfoCount = res.resInfo.length;
|
},
|
SetTableData3(res) {
|
this.resUseCount = res.resUseCount;
|
this.operateCount = res.operateCount.operateCount;
|
this.userLoginCount = res.userLoginCount.userLoginCount;
|
this.lineChart3();
|
this.lineChart4();
|
this.lineChart5();
|
},
|
handleClick(tab, event) {
|
switch (tab) {
|
case 'first':
|
break;
|
case 'second':
|
this.lineChart3();
|
break;
|
case 'third':
|
this.lineChart4();
|
break;
|
case 'fourth':
|
this.lineChart5();
|
break;
|
}
|
},
|
lineChart1() {
|
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',
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['', '', '', '', '', '', ''],
|
},
|
yAxis: [
|
{
|
axisLabel: {
|
show: false, // 不显示坐标轴上的文字
|
},
|
},
|
],
|
grid: [
|
{
|
top: '10%',
|
bottom: '10%',
|
left: '10%',
|
right: '10%',
|
},
|
],
|
series: [
|
{
|
type: 'line',
|
showSymbol: false,
|
data: valueList,
|
},
|
],
|
};
|
|
let myChart = this.$echarts.init(
|
document.getElementById('Sys_cpu_chart')
|
);
|
myChart.setOption(option);
|
window.addEventListener('resize', function () {
|
myChart.resize();
|
});
|
},
|
lineChart2(res) {
|
var a = 0;
|
if (res != 0) {
|
a = res.split('%').join('');
|
}
|
|
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: {
|
show: false,
|
},
|
formatter: function (value) {
|
return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
|
},
|
},
|
series: [
|
{
|
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,
|
},
|
label: {
|
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(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',
|
},
|
legend: {
|
top: '5%',
|
left: 'center',
|
textStyle: {
|
fontSize: 18, //字体大小
|
color: '#ffffff', //字体颜色
|
},
|
},
|
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: {
|
show: false,
|
},
|
data: data,
|
},
|
],
|
};
|
let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
|
myChart2.setOption(option);
|
window.addEventListener('resize', function () {
|
myChart2.resize();
|
});
|
},
|
lineChart4() {
|
var data1 = [];
|
var data2 = [];
|
for (var i in this.userLoginCount) {
|
data1.push(this.userLoginCount[i].optime);
|
data2.push(this.userLoginCount[i].count);
|
}
|
|
var option = {
|
title: {
|
show: false,
|
},
|
tooltip: {
|
trigger: 'axis',
|
},
|
legend: {
|
show: false,
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {},
|
},
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: data1,
|
},
|
yAxis: {
|
type: 'value',
|
},
|
series: [
|
{
|
name: '',
|
type: 'line',
|
stack: 'Total',
|
data: data2,
|
},
|
],
|
};
|
let myChart3 = this.$echarts.init(
|
document.getElementById('userLoginChart')
|
);
|
myChart3.setOption(option);
|
},
|
lineChart5() {
|
var data1 = [];
|
var data2 = [];
|
for (var i in this.operateCount) {
|
data1.push(this.operateCount[i].modular2);
|
data2.push(this.operateCount[i].count);
|
}
|
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow',
|
},
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: data1,
|
axisTick: {
|
alignWithLabel: true,
|
},
|
},
|
],
|
yAxis: [
|
{
|
type: 'value',
|
},
|
],
|
series: [
|
{
|
name: 'Direct',
|
type: 'bar',
|
barWidth: '60%',
|
data: data2,
|
},
|
],
|
};
|
let myChart4 = this.$echarts.init(
|
document.getElementById('operateCountChart')
|
);
|
myChart4.setOption(option);
|
},
|
},
|
created() {
|
if (Window.ws != null) {
|
Window.ws.close();
|
Window.ws.onclose = () => {
|
console.log('服务器关闭');
|
};
|
Window.ws = null;
|
}
|
|
Window.ws = new WebSocket(socketUrl);
|
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);
|
}
|
};
|
},
|
|
mounted() {
|
this.lineChart2(0);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.systemMonitoring_box {
|
border-radius: 10px;
|
height: 100%;
|
box-sizing: border-box;
|
.content_Box {
|
width: 97%;
|
height: 74%;
|
position: absolute;
|
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-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;
|
}
|
.heteroTitle {
|
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;
|
}
|
}
|
.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: 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);
|
}
|
.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;
|
}
|
}
|
}
|
</style>
|
