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
Split 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 }) => (
<>
<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) => {
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();
}
})
useEffect(() => {
const maxCombinedValue = mockData?.reduce((max, item) => {
const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount);
@ -275,15 +275,15 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
return combinedMax;
}
return max;
}, -Infinity)
const bigD= Math.ceil(maxCombinedValue/50)*50
if(bigD==0){
setXData([5,4,3,2,1,0,1,2,3,4,5])//最大值为0，默认横坐标
}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])
}
setBiggest(bigD)
if (mockData && mockData.length > 3 && mockData.length < 21) {
}, -Infinity)
const bigD = Math.ceil(maxCombinedValue / 50) * 50
if (bigD == 0) {
setXData([5, 4, 3, 2, 1, 0, 1, 2, 3, 4, 5])//最大值为0，默认横坐标
} 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])
}
setBiggest(bigD)
if (mockData && mockData.length > 3 && mockData.length < 21) {
const newArray = mockData.slice(3)
setAlarmData(newArray)
}
@ -292,8 +292,8 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
const newArray = mockData.slice(3, 20)
setAlarmData(newArray)
}
},[mockData])
}, [mockData])
// const mockData=[
// {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23},
// {id: 2,name: '测试结构物2',alarmCount: 300,dealAlarmCount: 22},
@ -531,6 +531,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
{/* <div > */}
<Select
showClear
filter
value={value}
multiple={true}
maxTagCount={1}
@ -548,7 +549,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
// text: v.name,
},
grid: {
left: 25,
left: 27,
right: 10,
bottom: 20,
},
@ -585,7 +586,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
areaStyle: {
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}
@ -599,7 +600,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
</div>
<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
}} >
{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='barChartDiv'>
<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 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>) : ''
@ -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='barChartDiv'>
<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 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>) : ''
@ -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='barChartDiv'>
<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 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>) : ''
@ -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='barChartDiv'>
<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 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>

Write Preview
Loading…
Cancel
Save