free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

结构物可搜索

dev
wenlele 1 year ago
parent
7549bb1a41
commit
0377351a58
2 changed files with 25 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/client/src/layout/components/header/components/customProjGroupModal.jsx
  2. 47
      web/client/src/sections/projectGroup/containers/bigscreen.jsx

2
web/client/src/layout/components/header/components/customProjGroupModal.jsx
View File

@ -53,7 +53,7 @@ const CustomProjGroupModal = (props) => {
{({ formState, values, formApi }) => ( {({ formState, values, formApi }) => (
<> <>
<Form.Input field='name' label='名称' rules={[{ required: true, message: '请填写自定义分组名称' }]} maxLength={15} /> <Form.Input field='name' label='名称' rules={[{ required: true, message: '请填写自定义分组名称' }]} maxLength={15} />
<Form.Select multiple field="pomsProjectIds" label={{ text: '运维项目' }} style={{ width: '100%' }} rules={[{ required: true, message: '请选择运维项目' }]} > <Form.Select filter multiple field="pomsProjectIds" label={{ text: '运维项目' }} style={{ width: '100%' }} rules={[{ required: true, message: '请选择运维项目' }]} >
{ {
pomsList.map((item, index) => { pomsList.map((item, index) => {
return ( return (

47
web/client/src/sections/projectGroup/containers/bigscreen.jsx
View File

@ -267,7 +267,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
interrupt.update(); interrupt.update();
} }
}) })
useEffect(() => { useEffect(() => {
const maxCombinedValue = mockData?.reduce((max, item) => { const maxCombinedValue = mockData?.reduce((max, item) => {
const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount); const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount);
@ -275,15 +275,15 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
return combinedMax; return combinedMax;
} }
return max; return max;
}, -Infinity) }, -Infinity)
const bigD= Math.ceil(maxCombinedValue/50)*50 const bigD = Math.ceil(maxCombinedValue / 50) * 50
if(bigD==0){ if (bigD == 0) {
setXData([5,4,3,2,1,0,1,2,3,4,5])//最大值为0，默认横坐标 setXData([5, 4, 3, 2, 1, 0, 1, 2, 3, 4, 5])//最大值为0，默认横坐标
}else{ } else {
setXData([bigD,(bigD-bigD/5),(bigD-bigD*2/5),(bigD-bigD*3/5),(bigD-bigD*4/5),0,(bigD-bigD*4/5),(bigD-bigD*3/5),(bigD-bigD*2/5),(bigD-bigD/5),bigD]) setXData([bigD, (bigD - bigD / 5), (bigD - bigD * 2 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 4 / 5), 0, (bigD - bigD * 4 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 2 / 5), (bigD - bigD / 5), bigD])
} }
setBiggest(bigD) setBiggest(bigD)
if (mockData && mockData.length > 3 && mockData.length < 21) { if (mockData && mockData.length > 3 && mockData.length < 21) {
const newArray = mockData.slice(3) const newArray = mockData.slice(3)
setAlarmData(newArray) setAlarmData(newArray)
} }
@ -292,8 +292,8 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
const newArray = mockData.slice(3, 20) const newArray = mockData.slice(3, 20)
setAlarmData(newArray) setAlarmData(newArray)
} }
},[mockData]) }, [mockData])
// const mockData=[ // const mockData=[
// {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, // {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23},
// {id: 2,name: '测试结构物2',alarmCount: 300,dealAlarmCount: 22}, // {id: 2,name: '测试结构物2',alarmCount: 300,dealAlarmCount: 22},
@ -531,6 +531,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
{/* <div > */} {/* <div > */}
<Select <Select
showClear showClear
filter
value={value} value={value}
multiple={true} multiple={true}
maxTagCount={1} maxTagCount={1}
@ -548,7 +549,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
// text: v.name, // text: v.name,
}, },
grid: { grid: {
left: 25, left: 27,
right: 10, right: 10,
bottom: 20, bottom: 20,
}, },
@ -585,7 +586,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
areaStyle: { areaStyle: {
color: '#0e9cff26', color: '#0e9cff26',
}, },
data: v.online?.map(f => [moment(f.collect_time).format('YYYY-MM-DD HH'), f.rate]) || [] data: v.online?.map(f => [moment(f.collect_time).format('YYYY-MM-DD HH'), f.rate.toFixed(1)]) || []
})) || [] })) || []
}} }}
notMerge={true} notMerge={true}
@ -599,7 +600,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div> </div>
<div style={{ width: '100%', height: "calc(55% - 24px)", display: 'flex', marginTop: 24 }}> <div style={{ width: '100%', height: "calc(55% - 24px)", display: 'flex', marginTop: 24 }}>
<Card title='告警排名TOP20' style={{ <Card title='告警排名TOP20' style={{
width: "calc(50% - 8px)", height: "100%", marginRight: 16 width: "calc(50% - 8px)", height: "100%", marginRight: 16
}} > }} >
{mockData && mockData.length > 0 ? (<div style={{ height: '100%' }}> {mockData && mockData.length > 0 ? (<div style={{ height: '100%' }}>
@ -620,10 +621,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[0]?.name?.length > 5 ? <Tooltip content={mockData[0]?.name}>{mockData[0]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[0]?.name?.length > 5 ? <Tooltip content={mockData[0]?.name}>{mockData[0]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width:(biggest>0? ((mockData[0].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest > 0 ? ((mockData[0].alarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[0].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest > 0 ? ((mockData[0].dealAlarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -635,10 +636,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[1]?.name?.length > 5 ? <Tooltip content={mockData[1]?.name}>{mockData[1]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[1]?.name?.length > 5 ? <Tooltip content={mockData[1]?.name}>{mockData[1]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width: (biggest>0? ((mockData[1].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest > 0 ? ((mockData[1].alarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width: (biggest>0? ((mockData[1].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest > 0 ? ((mockData[1].dealAlarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -650,10 +651,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{mockData[2]?.name?.length > 5 ? <Tooltip content={mockData[2]?.name}>{mockData[2]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div> <div class='structDiv'>{mockData[2]?.name?.length > 5 ? <Tooltip content={mockData[2]?.name}>{mockData[2]?.name.substring(0, 5) + '...'}</Tooltip> : mockData[0]?.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width: (biggest>0? ((mockData[2].alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest > 0 ? ((mockData[2].alarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width:(biggest>0? ((mockData[2].dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest > 0 ? ((mockData[2].dealAlarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
</div> </div>
</div>) : '' </div>) : ''
@ -667,10 +668,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
<div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div> <div class='structDiv'>{item.name?.length > 5 ? <Tooltip content={item.name}>{item.name.substring(0, 5) + '...'}</Tooltip> : item.name}</div>
<div class='barChartDiv'> <div class='barChartDiv'>
<div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}> <div style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}>
<div class='alarms' style={{ width:(biggest>0?((item.alarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='alarms' style={{ width: (biggest > 0 ? ((item.alarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
<div style={{ width: '50%', display: 'flex', }}> <div style={{ width: '50%', display: 'flex', }}>
<div class='dealAlarms' style={{ width:(biggest>0? ((item.dealAlarmCount / biggest) * 100 || '%'):0), height: '100%' }}></div> <div class='dealAlarms' style={{ width: (biggest > 0 ? ((item.dealAlarmCount / biggest) * 100 || '%') : 0), height: '100%' }}></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save