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

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

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