feat:告警top20

1 year ago · b94eba8ed7
4 changed files with 80 additions and 38 deletions
--- 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 } },
+   });
 }
--- 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(()=>{
               <div style={{ width: '100%', height: "calc(55% - 24px)", display: 'flex', marginTop: 24 }}>
                  <Card title='告警排名TOP20' style={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16
                  }} >
-                     <div style={{ height: '100%' }}>
+                  {mockData&&mockData.length>0 ?(<div style={{ height: '100%' }}>
                        <div style={{display:"flex", justifyContent:'flex-end'}}>
                           <div style={{display:"flex",alignItems:'center'}}>
                              <div class='alarmDiv'></div><div class='alarm'>超阈值个数</div>
@ -184,7 +196,7 @@ useEffect(()=>{
                           </div>
                        </div>
                        <div id='alarmRank'  style={{ height:clientHeight*0.55-150, position: 'relative' }}>
-                        {mockData[0]?(<div style={{display:'flex',marginTop:15,alignItems:'center'}}>
+                        {mockData&&mockData[0]?(<div style={{display:'flex',marginTop:15,alignItems:'center'}}>
                           <div class='rankDiv'>
                              <img src='/assets/images/projectGroup/first.png'></img>
                           </div>
@ -199,7 +211,7 @@ useEffect(()=>{
                              </div>
                        </div>):''
                        }
-                        {mockData[1]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
+                        {mockData&&mockData[1]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
                           <div class='rankDiv'>
                              <img src='/assets/images/projectGroup/second.png'></img>
                           </div>
@ -214,7 +226,7 @@ useEffect(()=>{
                              </div>
                        </div>):''
                        }
-                        {mockData[2]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
+                        {mockData&&mockData[2]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
                           <div class='rankDiv'>
                              <img src='/assets/images/projectGroup/third.png'></img>
                           </div>
@ -253,9 +265,11 @@ useEffect(()=>{
                  }
                  </div>
                  <div class="scale">
-
+                     {xData?.map(item=>{
+                        return <div >{item}</div>
+                     })}
                  </div>
-                     </div>
+                     </div>):''}
                  </Card>
                  <Card title='中断排名' style={{ width: "calc(50% - 8px)", height: "100%", }}>
                     <div style={{ height: '100%' }}>
--- 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;
+}



--- 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',    //获取已绑定项目