From b94eba8ed7165e2b3aae6b7c40ba9f8eb5cd39a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?zhaobing=E2=80=99?= Date: Wed, 30 Aug 2023 19:09:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=91=8A=E8=AD=A6top20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sections/projectGroup/actions/group.js | 14 +++ .../projectGroup/containers/bigscreen.jsx | 90 +++++++++++-------- .../src/sections/projectGroup/style.less | 13 +++ web/client/src/utils/webapi.js | 1 + 4 files changed, 80 insertions(+), 38 deletions(-) diff --git a/web/client/src/sections/projectGroup/actions/group.js b/web/client/src/sections/projectGroup/actions/group.js index f60a956..aa351e8 100644 --- a/web/client/src/sections/projectGroup/actions/group.js +++ b/web/client/src/sections/projectGroup/actions/group.js @@ -55,4 +55,18 @@ export function groupStatisticOnline (query = {}) { msg: { error: "获取项目分组在线率统计信息失败" }, reducer: { name: "groupStatisticOnline", params: { noClear: true } }, }); +} + + +export function groupStatisticAlarm (query = {}) { + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + query, + actionType: "GET_STATISTICALARM", + url: `${ApiTable.groupStatisticAlarm}`, + msg: { error: "获获取项目分组告警统计信息失败" }, + reducer: { name: "groupStatisticAlarm", + params: { noClear: true } }, + }); } \ No newline at end of file diff --git a/web/client/src/sections/projectGroup/containers/bigscreen.jsx b/web/client/src/sections/projectGroup/containers/bigscreen.jsx index 754bbb3..5374a1b 100644 --- a/web/client/src/sections/projectGroup/containers/bigscreen.jsx +++ b/web/client/src/sections/projectGroup/containers/bigscreen.jsx @@ -15,12 +15,22 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou const [alarmData,setAlarmData]=useState()//第三项之后的数据 const [biggest,setBiggest]=useState()//最大的刻度值 + const [mockData,setMockData]=useState()//所有的告警数据 + const [xData,setXData]=useState([])//横坐标 useEffect(() => { let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId - console.log(); dispatch(actions.projectGroup.groupStatisticOnline({ groupId })) + dispatch(actions.projectGroup.groupStatisticAlarm({groupId})).then(res=>{ + if(res.success){ + setMockData(res.data) + } + }) }, []) - + useEffect(()=>{ + // let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId + + + },[]) useEffect(()=>{ const domProject1 = document.getElementById("alarmRank"); if (domProject1) { @@ -34,47 +44,49 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou } }) useEffect(()=>{ - const maxCombinedValue = mockData.reduce((max, item) => { + const maxCombinedValue = mockData?.reduce((max, item) => { const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount); if (combinedMax > max) { return combinedMax; } return max; }, -Infinity) - setBiggest(maxCombinedValue) - + const bigD= Math.ceil(maxCombinedValue/50)*50 + 50,40,30,20,10,0 + 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) },[]) - const mockData=[ - {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, - {id: 2,name: '测试结构物2',alarmCount: 150,dealAlarmCount: 22}, - {id: 3,name: '测试结构物3',alarmCount: 140,dealAlarmCount: 21}, - {id: 4,name: '测试结构物4',alarmCount: 120,dealAlarmCount: 23}, - {id: 5,name: '测试结构物5',alarmCount: 110,dealAlarmCount: 22}, - {id: 6,name: '测试结构物6',alarmCount: 109,dealAlarmCount: 21}, - {id: 7,name: '测试结构物7',alarmCount: 100,dealAlarmCount: 23}, - {id: 8,name: '测试结构物8',alarmCount: 99,dealAlarmCount: 22}, - {id: 9,name: '测试结构物9',alarmCount: 98,dealAlarmCount: 21}, - {id: 10,name: '测试结构物10',alarmCount: 97,dealAlarmCount: 23}, - {id: 11,name: '测试结构物11',alarmCount: 96,dealAlarmCount: 22}, - {id: 12,name: '测试结构物12',alarmCount: 95,dealAlarmCount: 21}, - {id: 13,name: '测试结构物13',alarmCount: 100,dealAlarmCount: 23}, - {id: 14,name: '测试结构物14',alarmCount: 49,dealAlarmCount: 22}, - {id: 15,name: '测试结构物15',alarmCount: 48,dealAlarmCount: 21}, - {id: 16,name: '测试结构物16',alarmCount: 47,dealAlarmCount: 23}, - {id: 17,name: '测试结构物17',alarmCount: 46,dealAlarmCount: 22}, - {id: 18,name: '测试结构物18',alarmCount: 45,dealAlarmCount: 21}, - {id: 19,name: '测试结构物19',alarmCount: 30,dealAlarmCount: 22}, - {id: 20,name: '测试结构物20',alarmCount: 29,dealAlarmCount: 21}, - {id: 21,name: '测试结构物21',alarmCount: 28,dealAlarmCount: 23}, - {id: 22,name: '测试结构物22',alarmCount: 27,dealAlarmCount: 22}, - {id: 23,name: '测试结构物23',alarmCount: 26,dealAlarmCount: 21}, - ] + // const mockData=[ + // {id: 1,name: '测试结构物测试结构物',alarmCount: 200,dealAlarmCount: 23}, + // {id: 2,name: '测试结构物2',alarmCount: 300,dealAlarmCount: 22}, + // {id: 3,name: '测试结构物3',alarmCount: 140,dealAlarmCount: 21}, + // {id: 4,name: '测试结构物4',alarmCount: 120,dealAlarmCount: 23}, + // {id: 5,name: '测试结构物5',alarmCount: 110,dealAlarmCount: 22}, + // {id: 6,name: '测试结构物6',alarmCount: 109,dealAlarmCount: 21}, + // {id: 7,name: '测试结构物7',alarmCount: 100,dealAlarmCount: 23}, + // {id: 8,name: '测试结构物8',alarmCount: 99,dealAlarmCount: 22}, + // {id: 9,name: '测试结构物9',alarmCount: 98,dealAlarmCount: 21}, + // {id: 10,name: '测试结构物10',alarmCount: 97,dealAlarmCount: 23}, + // {id: 11,name: '测试结构物11',alarmCount: 96,dealAlarmCount: 22}, + // {id: 12,name: '测试结构物12',alarmCount: 95,dealAlarmCount: 21}, + // {id: 13,name: '测试结构物13',alarmCount: 100,dealAlarmCount: 23}, + // {id: 14,name: '测试结构物14',alarmCount: 49,dealAlarmCount: 22}, + // {id: 15,name: '测试结构物15',alarmCount: 48,dealAlarmCount: 21}, + // {id: 16,name: '测试结构物16',alarmCount: 47,dealAlarmCount: 23}, + // {id: 17,name: '测试结构物17',alarmCount: 46,dealAlarmCount: 22}, + // {id: 18,name: '测试结构物18',alarmCount: 45,dealAlarmCount: 21}, + // {id: 19,name: '测试结构物19',alarmCount: 30,dealAlarmCount: 22}, + // {id: 20,name: '测试结构物20',alarmCount: 29,dealAlarmCount: 21}, + // {id: 21,name: '测试结构物21',alarmCount: 28,dealAlarmCount: 23}, + // {id: 22,name: '测试结构物22',alarmCount: 27,dealAlarmCount: 22}, + // {id: 23,name: '测试结构物23',alarmCount: 26,dealAlarmCount: 21}, + // ] useEffect(()=>{ - if(mockData.length>3&&mockData.length<21){ + if(mockData&&mockData.length>3&&mockData.length<21){ const newArray = mockData.slice(3) setAlarmData(newArray) } - if(mockData.length>21){ + if(mockData&&mockData.length>21){ //数据大于20的话，取前20 const newArray = mockData.slice(3,20) setAlarmData(newArray) @@ -174,7 +186,7 @@ useEffect(()=>{
-
+ {mockData&&mockData.length>0 ?(
超阈值个数
@@ -184,7 +196,7 @@ useEffect(()=>{
- {mockData[0]?(
+ {mockData&&mockData[0]?(
@@ -199,7 +211,7 @@ useEffect(()=>{
):'' } - {mockData[1]?(
+ {mockData&&mockData[1]?(
@@ -214,7 +226,7 @@ useEffect(()=>{
):'' } - {mockData[2]?(
+ {mockData&&mockData[2]?(
@@ -253,9 +265,11 @@ useEffect(()=>{ }
- + {xData?.map(item=>{ + return
{item}
+ })}
-
+
):''}
diff --git a/web/client/src/sections/projectGroup/style.less b/web/client/src/sections/projectGroup/style.less index 522cf4b..dbb1989 100644 --- a/web/client/src/sections/projectGroup/style.less +++ b/web/client/src/sections/projectGroup/style.less @@ -90,6 +90,19 @@ background-image: linear-gradient(270deg, #fbac3229 1%, #FBAC32 100%); box-shadow: inset -2px 0 0 0 #FBAC32; } +.scale{ + display: flex; + width: 740px; + height: 18px; + font-family: DIN-Regular; + font-weight: 400; + font-size: 12px; + color: #5A6685; + letter-spacing: 0; + text-align: center; + justify-content: space-between; + margin-left: 134.48px; +} diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 22281a0..3bfba9a 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -40,6 +40,7 @@ export const ApiTable = { projectGroup: 'project/group', groupStatistic: 'project/group/statistic', groupStatisticOnline: 'project/group/statistic/online', + groupStatisticAlarm:'project/group/statistic/alarm', //告警 getProjectPoms: 'project/poms', //获取已绑定项目