github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

优化监控中心总览展示效果

pull/605/head
vapao 2023-03-31 11:17:11 +08:00
parent 465eed7351
commit f2d86ae69d
2 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
spug_web/src/pages/monitor/MonitorCard.js
View File

@ -6,16 +6,16 @@
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react';
import { Card, Input, Select, Space, Tooltip, Spin, message } from 'antd';
import { FrownOutlined, RedoOutlined, SyncOutlined } from '@ant-design/icons';
import { FrownOutlined, ReloadOutlined, SyncOutlined } from '@ant-design/icons';
import styles from './index.module.less';
import store from './store';
const StyleMap = {
'0': {background: '#99999933', border: '2px solid #999', color: '#999999'},
'1': {background: '#16a98733', border: '2px solid #16a987', color: '#16a987'},
'2': {background: '#ffba0033', border: '2px solid #ffba00', color: '#ffba00'},
'3': {background: '#f2655d33', border: '2px solid #f2655d', color: '#f2655d'},
'10': {background: '#99999919', border: '2px dashed #999999', color: '#999999'}
'0': {background: '#99999933', border: '1px solid #999', color: '#999999'},
'1': {background: '#16a98733', border: '1px solid #16a987', color: '#16a987'},
'2': {background: '#ffba0033', border: '1px solid #ffba00', color: '#ffba00'},
'3': {background: '#f2655d33', border: '1px solid #f2655d', color: '#f2655d'},
'10': {background: '#99999919', border: '1px dashed #999999', color: '#999999'}
}
const StatusMap = {
@ -27,9 +27,10 @@ const StatusMap = {
}
function CardItem(props) {
const {status, type, desc, name, target, latest_run_time} = props.data
const {status, type, group, desc, name, target, latest_run_time} = props.data
const title = (
<div>
<div>分组: {group}</div>
<div>类型: {type}</div>
<div>名称: {name}</div>
<div>目标: {target}</div>
@ -65,7 +66,7 @@ function MonitorCard() {
const filteredRecords = store.ovDataSource.filter(x => !status || x.status === status)
return (
<Card title="总览" style={{marginBottom: 24}} extra={(
<Card title="总览" style={{marginBottom: 24}} bodyStyle={{padding: '12px 24px'}} extra={(
<Space size="middle">
<Space>
<div>分组：</div>
@ -94,21 +95,21 @@ function MonitorCard() {
{Object.entries(StyleMap).map(([s, style]) => {
const count = store.ovDataSource.filter(x => x.status === s).length;
return count ? (
<Tooltip key={s} title={StatusMap[s]}>
<div
key={s}
className={styles.item}
style={s === status ? style : {...style, background: '#fff'}}
onClick={() => setStatus(s === status ? '' : s)}>
{store.ovDataSource.filter(x => x.status === s).length}
</div>
</Tooltip>
) : null
})}
<div
className={styles.authLoad}
style={autoReload ? {backgroundColor: '#1890ff'} : {color: '#1890ff', border: '2px solid #1890ff'}}
onClick={handleAutoReload}>
{autoReload ? <SyncOutlined/> : <RedoOutlined/>}
<Tooltip title="自动刷新">
<div className={styles.autoLoad} onClick={handleAutoReload}>
{autoReload ? <SyncOutlined spin style={{color: '#2563fc'}}/> : <ReloadOutlined/>}
</div>
</Tooltip>
</div>
{filteredRecords.length > 0 ? (
<Space wrap size={4}>

22
spug_web/src/pages/monitor/index.module.less
View File

@ -7,8 +7,8 @@
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
width: 16px;
height: 16px;
font-size: 12px;
color: #fff;
border-radius: 2px;
@ -17,6 +17,7 @@
.header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 12px;
margin-top: -6px;
@ -25,24 +26,19 @@
justify-content: center;
align-items: center;
min-width: 26px;
height: 26px;
padding: 0 1px;
height: 20px;
margin-left: 12px;
border-radius: 2px;
border-radius: 10px;
padding: 0 8px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.authLoad {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
color: #fff;
.autoLoad {
margin-left: 24px;
border-radius: 2px;
font-size: 18px;
color: #999999;
}
}