diff --git a/web/client/src/sections/projectGroup/containers/bigscreen.jsx b/web/client/src/sections/projectGroup/containers/bigscreen.jsx
index 1ffa0e3..cf98283 100644
--- a/web/client/src/sections/projectGroup/containers/bigscreen.jsx
+++ b/web/client/src/sections/projectGroup/containers/bigscreen.jsx
@@ -63,50 +63,62 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
       }
 
    }, [])
-   // const mockData=[
-   //    {
-   //       "name": "西腰墩水库",
-   //       "id": 2957,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "智慧排涝-雄溪河绿新桥南侧智能分流井排口",
-   //       "id": 2966,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "智慧排涝-雄溪河东侧绿地山庄红色廊厅排口",
-   //       "id": 2967,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "鲍家湖水库",
-   //       "id": 2973,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "长春市九台区水旱灾害防御中心小型水库",
-   //       "id": 2975,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "重庆观音峡项目",
-   //       "id": 2977,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "杭州宝坞口隧道监测",
-   //       "id": 2988,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
+   //    const mockData=[
+   //       {
+   //          "name": "西腰墩水库",
+   //          "id": 2957,
+   //          "alarmCount": 6,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "智慧排涝-雄溪河绿新桥南侧智能分流井排口",
+   //          "id": 2966,
+   //          "alarmCount": 1,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "智慧排涝-雄溪河东侧绿地山庄红色廊厅排口",
+   //          "id": 2967,
+   //          "alarmCount": 3,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "鲍家湖水库",
+   //          "id": 2973,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "长春市九台区水旱灾害防御中心小型水库",
+   //          "id": 2975,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "重庆观音峡项目",
+   //          "id": 2977,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "杭州宝坞口隧道监测",
+   //          "id": 2988,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "大湖湾水库",
+   //          "id": 3004,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
+   //          "name": "上高高情远韵驿站智慧公厕",
+   //          "id": 3007,
+   //          "alarmCount": 0,
+   //          "dealAlarmCount": 0
+   //      },
+   //      {
    //       "name": "大湖湾水库",
    //       "id": 3004,
    //       "alarmCount": 0,
@@ -119,132 +131,18 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
    //       "dealAlarmCount": 0
    //   },
    //   {
-   //       "name": "后头湖水库",
-   //       "id": 3008,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "灵宝边坡项目",
-   //       "id": 3010,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "大河峡水库",
-   //       "id": 3023,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "公家墩水库",
-   //       "id": 3024,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "黑达坂水库",
-   //       "id": 3025,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "白家明塘湖水库",
-   //       "id": 3033,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "天城湖水库",
-   //       "id": 3034,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "马尾湖水库",
-   //       "id": 3035,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "芦湾墩上库",
-   //       "id": 3036,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "寺沟水库",
-   //       "id": 3037,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "北台子水库",
-   //       "id": 3038,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "流水口水库",
-   //       "id": 3039,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "三十六道沟水库",
-   //       "id": 3040,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "三坝水库",
-   //       "id": 3041,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "瓷窑口水库",
-   //       "id": 3042,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "大香沟水库",
-   //       "id": 3043,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "小香沟水库",
-   //       "id": 3044,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "芦湾墩下库",
-   //       "id": 3045,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "刘家深湖水库",
-   //       "id": 3047,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "古城水库",
-   //       "id": 3048,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   //   {
-   //       "name": "水关河水库",
-   //       "id": 3049,
-   //       "alarmCount": 0,
-   //       "dealAlarmCount": 0
-   //   },
-   // ]
+   //    "name": "大湖湾水库",
+   //    "id": 3004,
+   //    "alarmCount": 0,
+   //    "dealAlarmCount": 0
+   // },
+   // {
+   //    "name": "上高高情远韵驿站智慧公厕",
+   //    "id": 3007,
+   //    "alarmCount": 0,
+   //    "dealAlarmCount": 0
+   // },
+   //    ]
    useEffect(() => {
       const overview = document.getElementById("alarmRank");
       if (overview) {
@@ -330,8 +228,8 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
             })
             Interrupt = Interrupt?.sort((a, b) => b.offline - a.offline)
             setInterruptRank(Interrupt)
-            setOnline(res.payload.data || [])
-            setValue(res.payload.data?.map(v => v.id) || [])
+            setOnline(res.payload.data?.slice(0, 10) || [])
+            setValue(res.payload.data?.map(v => v.id)?.slice(0, 10) || [])
             // eChartsData(res.payload.data || [], res.payload.data?.map(v => v.id) || [])
          }
       })
@@ -621,10 +519,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>) : ''
@@ -636,10 +534,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>) : ''
@@ -651,10 +549,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>) : ''
@@ -668,10 +566,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>