feat:告警

web/client/src/sections/projectGroup/containers/bigscreen.jsx

@@ -6,17 +6,84 @@ import Card from '../components/card'
 import '../style.less'
 import ReactECharts from 'echarts-for-react';
 import moment from 'moment'
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+import PerfectScrollbar from "perfect-scrollbar";
 
-
+let overviewScrollbar;
 
 const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, groupStatisticOnline }) => {
 
+   const [alarmData,setAlarmData]=useState()//第三项之后的数据
+   const [biggest,setBiggest]=useState()//最大的刻度值
    useEffect(() => {
       let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId
       console.log();
       dispatch(actions.projectGroup.groupStatisticOnline({ groupId }))
    }, [])
 
+   useEffect(()=>{
+      const domProject1 = document.getElementById("alarmRank");
+      if (domProject1) {
+         overviewScrollbar = new PerfectScrollbar("#alarmRank", {
+            suppressScrollX: true,
+         });
+      }
+         if (overviewScrollbar&&domProject1) {
+            overviewScrollbar.update();
+         
+      }
+   })
+   useEffect(()=>{
+      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 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},
+   ]   
+useEffect(()=>{
+   if(mockData.length>3&&mockData.length<21){
+      const newArray = mockData.slice(3)
+      setAlarmData(newArray)
+   }
+   if(mockData.length>21){
+      //数据大于20的话，取前20
+      const newArray = mockData.slice(3,20)
+      setAlarmData(newArray)
+   }
+
+},[])
+
+
+
    console.log(groupStatisticOnline);
 
    return (
@@ -105,10 +172,89 @@ 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={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16, }}>
+                  <Card title='告警排名TOP20' style={{ width: "calc(50% - 8px)", height: "100%", marginRight: 16
+                  }} >
                      <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>
+                           </div>
+                           <div style={{display:"flex",alignItems:'center'}}>
+                              <div class='dealAlarmCountDiv'></div><div class='alarmCount'>手动恢复个数</div>
+                           </div>
+                        </div>
+                        <div id='alarmRank'  style={{ height:clientHeight*0.55-150, position: 'relative' }}>
+                        {mockData[0]?(<div style={{display:'flex',marginTop:15,alignItems:'center'}}>
+                           <div class='rankDiv'>
+                              <img src='/assets/images/projectGroup/first.png'></img>
+                           </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 style={{width:'50%',display:'flex',justifyContent:'flex-end'}}>
+                                    <div class='alarms' style={{width:(mockData[0].alarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                                 <div style={{width:'50%',display:'flex',}}>
+                                    <div class='dealAlarms' style={{width:(mockData[0].dealAlarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                              </div>
+                        </div>):''
+                        }
+                        {mockData[1]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
+                           <div class='rankDiv'>
+                              <img src='/assets/images/projectGroup/second.png'></img>
+                           </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 style={{width:'50%',display:'flex',justifyContent:'flex-end'}}>
+                                    <div class='alarms' style={{width:(mockData[1].alarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                                 <div style={{width:'50%',display:'flex',}}>
+                                    <div class='dealAlarms' style={{width:(mockData[1].dealAlarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                              </div>
+                        </div>):''
+                        }
+                        {mockData[2]?(<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
+                           <div class='rankDiv'>
+                              <img src='/assets/images/projectGroup/third.png'></img>
+                           </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 style={{width:'50%',display:'flex',justifyContent:'flex-end'}}>
+                                    <div class='alarms' style={{width:(mockData[2].alarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                                 <div style={{width:'50%',display:'flex',}}>
+                                    <div class='dealAlarms' style={{width:(mockData[2].dealAlarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                              </div>
+                        </div>):''
+                        }
+                     {alarmData&&alarmData.length?
+                        alarmData.map((item,index)=>
+                           {
+                              return  (<div style={{display:'flex',marginTop:5,alignItems:'center'}}>
+                              <div class='rankDiv'>
+                                 <span>{index+4}</span>
+                              </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 style={{width:'50%',display:'flex',justifyContent:'flex-end'}}>
+                                    <div class='alarms' style={{width:(item.alarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                                 <div style={{width:'50%',display:'flex',}}>
+                                    <div class='dealAlarms' style={{width:(item.dealAlarmCount/biggest)*100||'%',height:'100%'}}></div>
+                                 </div>
+                              </div>
                               
+                           </div>)
+                           }
+                        )
+                    :''
+                  }
+                  </div>
+                  <div class="scale">
 
+                  </div>
                      </div>
                   </Card>
                   <Card title='中断排名' style={{ width: "calc(50% - 8px)", height: "100%", }}>

web/client/src/sections/projectGroup/style.less

@@ -1,3 +1,96 @@
 .project-group {
    font-family: PangMenZhengDaoBiaoTiTi;
 }
+.alarmDiv{
+   width: 8px;
+   height: 8px;
+   background-image: linear-gradient(180deg, #fbac3200 1%, #FBAC32 100%);
+   box-shadow: inset 0 2px 0 0 #FBAC32;
+}
+.alarm{
+   width: 73px;
+   height: 12px;
+   font-family: SourceHanSansCN-Regular;
+   font-weight: 400;
+   font-size: 12px;
+   color: #A0A0A0;
+   letter-spacing: 0;
+   line-height: 12px;
+   // margin-left: 2!important;
+}
+.dealAlarmCountDiv{
+   width: 8px;
+   height: 8px;
+   background-image: linear-gradient(180deg, #c2d2ff00 1%, #2A62FC 100%);
+   box-shadow: inset 0 2px 0 0 #2C66F3;
+}
+.alarmCount{
+   width: 73px;
+   height: 12px;
+   font-family: SourceHanSansCN-Regular;
+   font-weight: 400;
+   font-size: 12px;
+   color: #A0A0A0;
+   letter-spacing: 0;
+   text-align: right;
+   line-height: 12px;
+   // margin-left: 2 !important;
+
+}
+//柱状图外层的div
+.barChartDiv{
+   width: 740px;
+   height: 12px;
+   background: #F0F5FF;
+   border-radius: 2px;
+   display: flex;
+}
+.structDiv{
+   width: 100px;
+   height: 14px;
+   font-family: SourceHanSansCN-Regular;
+   font-weight: 400;
+   font-size: 14px;
+   color: #3E434E;
+   letter-spacing: 0;
+   line-height: 14px;
+   text-align: center;
+}
+.rankDiv{
+   width: 34.48px;
+   height: 17.67px;
+   text-align: center;
+   span{
+
+         width: 13px;
+         height: 16px;
+         font-family: D-DIN-Italic;
+         font-weight: Italic;
+         font-size: 16px;
+         color: #7C8DB6;
+         letter-spacing: 0;
+      
+   }
+}
+.rankBackDiv{
+   // width: 34.48px;
+   // height: 9px;
+   // background-image: linear-gradient(270deg, #f957571f 0%, #f32c2c57 93%);
+   // margin-bottom: 0;
+}
+.alarms{
+   width: 282px;
+   height: 10px;
+   background-image: linear-gradient(116deg, #2c66f329 8%, #2C66F3 100%);
+   box-shadow: inset 2px 0 0 0 #2C66F3;
+}
+.dealAlarms{
+   width: 108px;
+   height: 10px;
+   background-image: linear-gradient(270deg, #fbac3229 1%, #FBAC32 100%);
+   box-shadow: inset -2px 0 0 0 #FBAC32;
+}
+
+
+
+