diff --git a/web/client/src/sections/projectGroup/components/AutoRollComponent.jsx b/web/client/src/sections/projectGroup/components/AutoRollComponent.jsx
new file mode 100644
index 0000000..d85a6b1
--- /dev/null
+++ b/web/client/src/sections/projectGroup/components/AutoRollComponent.jsx
@@ -0,0 +1,140 @@
+
+import React, { Component } from 'react';
+import { Row, Col } from '@douyinfe/semi-ui';
+
+export default class AutoRollComponent extends Component {
+
+    constructor(props) {
+        super(props);
+        this.scrollElem = null;
+        this.stopscroll = true;
+        this.preTop = 0;
+        this.cloneEle = null;
+        this.currentTop = 0;
+        this.marqueesHeight = 0;
+        this.interval = null;
+        this.state = {
+            enabledScroll: false
+        }
+    }
+
+    get enabledScroll() {
+        let scrollElem = document.getElementById(this.props.divId);
+        let fatherElem = scrollElem?.parentNode || null;
+        if (scrollElem && fatherElem) {
+            return scrollElem.scrollHeight > fatherElem.scrollHeight
+        }
+
+        return false;
+    }
+
+
+    marque = (height) => {
+        console.log('height',height)
+        try {
+            this.scrollElem = document.getElementById(this.props.divId);
+            this.marqueesHeight = height;
+            if (this.scrollElem) {
+                this.scrollElem.style.height = this.marqueesHeight;
+                this.scrollElem.style.overflow = 'hidden';
+            }
+            this.repeat();
+        } catch (e) { console.log(e) }
+    }
+
+
+    repeat = () => {
+        this.scrollElem.scrollTop = 0;
+        let offset = 1.5
+
+        this.interval = setInterval(() => {
+            if (this.stopscroll) return;
+            this.currentTop = this.currentTop + offset;
+            this.preTop = this.scrollElem.scrollTop;
+            this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset;
+            //  console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop}  === this.preTop:${this.preTop}`);
+            if (this.preTop === this.scrollElem.scrollTop) {
+                this.scrollElem.scrollTop = this.marqueesHeight;
+                this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset;
+            }
+        }, 40);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+
+    }
+
+    componentWillReceiveProps(nextProps) {
+        requestAnimationFrame(() => {
+            if (this.enabledScroll) {
+                if (!this.state.enabledScroll) {
+                    this.setState({ enabledScroll: true }, () => {
+                        this.marque(10)
+                    })
+                }
+
+            }
+        })
+    }
+
+    componentDidMount() {
+        if (this.enabledScroll) {
+            this.setState({ enabledScroll: true }, () => {
+                this.marque(10)
+            })
+        }
+    }
+
+    onMouseOver = () => {
+        this.stopscroll = true;
+    }
+
+    onMouseOut = () => {
+        this.stopscroll = false;
+    }
+
+
+    render() {
+
+        const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props;
+
+        return (
+            <div style={{ ...containerStyle, textAlign: 'left' }}>
+                {
+                    heads ?
+                        <Row style={{ lineHeight: '40px', height: 40 }}>
+                            {heads.map((c, index) => {
+                                return <Col span={spans[index]} key={index}>{c}</Col>
+                            })
+                            }
+                        </Row> : ''
+                }
+
+                <div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                    <div>
+                        {content ? content : ''}
+                        {this.state.enabledScroll && content ? content : ''}
+                        {
+                            data ?
+                                data.map((q, idx) => {
+                                    return (
+                                        <div key={idx}>
+                                            <Row gutter={16} style={{ borderBottom: '0px solid grey' }}>
+                                                {heads.map((c, index) => {
+                                                    return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}>
+                                                        {index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col>
+                                                })
+                                                }
+                                            </Row>
+                                        </div>
+                                    )
+                                }) : ''
+                        }
+                        <div style={{ margin: 16 }}></div>
+                    </div>
+                </div>
+            </div >
+        )
+    }
+}
\ 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 9970b7b..97f6e29 100644
--- a/web/client/src/sections/projectGroup/containers/bigscreen.jsx
+++ b/web/client/src/sections/projectGroup/containers/bigscreen.jsx
@@ -8,7 +8,7 @@ import '../style.less'
 import ReactECharts from 'echarts-for-react';
 import moment from 'moment'
 import PerfectScrollbar from "perfect-scrollbar";
-
+import AutoRollComponent from '../components/AutoRollComponent'
 
 let interrupt
 let repair
@@ -65,7 +65,6 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
       }
 
    }, [])
-
    useEffect(() => {
       const overview = document.getElementById("alarmRank");
       if (overview) {
@@ -110,8 +109,10 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
       }
       if (mockData && mockData.length > 21) {
          //数据大于20的话，取前20
-         const newArray = mockData.slice(3, 20)
+         const newArray = mockData.slice(0, 20)
+         console.log('newArray',newArray)
          setAlarmData(newArray)
+
       }
    }, [mockData])
 
@@ -367,7 +368,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
                   <Card title='告警排名TOP20' tooltipContent='(1)超阈值个数：一周内结构物超阈值告警的个数。(2）手动恢复个数：一个月内超阈值告警手动恢复的个数' style={{
                      width: "calc(50% - 8px)", height: "100%", marginRight: 16
                   }} >
-                     {mockData && mockData.length > 0 ? (<div style={{ height: '100%' }}>
+                     {alarmData && alarmData.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>
@@ -377,74 +378,31 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
                            </div>
                         </div>
                         <div id='alarmRank' style={{ height: clientHeight * 0.55 - 150, position: 'relative' }}>
-
-                           {mockData && 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:(biggest>0? ((mockData[0].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                 </div>
-                                 <div style={{ width: '50%', display: 'flex', }}>
-                                    <div class='dealAlarms' style={{ width: (biggest>0? ((mockData[0].alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                 </div>
-                              </div>
-                           </div>) : ''
-                           }
-                           {mockData && 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: (biggest>0? ((mockData[1].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                 </div>
-                                 <div style={{ width: '50%', display: 'flex', }}>
-                                    <div class='dealAlarms' style={{ width: (biggest>0? ((mockData[1].alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                 </div>
-                              </div>
-                           </div>) : ''
-                           }
-                           {mockData && 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: (biggest>0? ((mockData[2].dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                 </div>
-                                 <div style={{ width: '50%', display: 'flex', }}>
-                                    <div class='dealAlarms' style={{ width:(biggest>0? ((mockData[2].alarmCount / biggest) * 100 + '%'):0), 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:(biggest>0?((item.dealAlarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                       </div>
-                                       <div style={{ width: '50%', display: 'flex', }}>
-                                          <div class='dealAlarms' style={{ width:(biggest>0? ((item.alarmCount / biggest) * 100 + '%'):0), height: '100%' }}></div>
-                                       </div>
-                                    </div>
-
-                                 </div>)
-                              }
-                              )
-                              : ''
-                           }
+                        <AutoRollComponent content={ <>{alarmData?.map((item,index)=>{
+   return (<div style={{ display: 'flex', marginTop: 15, alignItems: 'center' }}>
+   <div class='rankDiv'>
+      {index===0?<img src='/assets/images/projectGroup/first.png'></img>:
+      index===1?<img src='/assets/images/projectGroup/second.png'></img>:
+      index===2?<img src='/assets/images/projectGroup/third.png'></img>:
+      index>2? <span>{index + 1}</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',position:'relative' }}>
+     <span style={{position:'absolute',left:0,zIndex:2}}> {item.dealAlarmCount}</span>
+         <div class='alarms' style={{ width:(biggest>0? ((item.dealAlarmCount / biggest) * 100 + '%'):0), height: '100%',zIndex:2 }}>  </div>
+      </div>
+      <div style={{ width: '50%', display: 'flex',position:'relative' }}>
+     <span style={{position:'absolute',right:0,zIndex:2}}> {item.alarmCount}</span>
+         <div class='dealAlarms' style={{ width: (biggest>0? ((item.alarmCount / biggest) * 100 + '%'):0), height: '100%',zIndex:2 }}> </div>
+      </div>
+   </div>
+</div>) 
+})}</> }  containerStyle={{ position: "relative", height: "95%", }}
+divHeight={"100%"} divId={"chart"}/>      
                         </div>
+                       
                         <div class="scale">
                            {xData?.map(item => {
                               return <div >{item}</div>
@@ -460,6 +418,7 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
                            <div style={{ textAlign: 'center', width: '33%' }}>中断个数</div>
                         </div>
                         <div id="interrupt" style={{ position: 'relative', height: clientHeight * 0.55 - 170 }}>
+                        <AutoRollComponent content={ <>
                            {InterruptRank?.map((c, index) => {
                               let title
                               if (c.offline) {
@@ -484,7 +443,8 @@ const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, grou
                                  <div style={{ textAlign: 'center', width: '33%' }}>{title}</div>
                                  <div style={{ textAlign: 'center', width: '33%', fontFamily: 'SourceHanSansCN-Regular', color: '#F33B3B', fontWeight: 400 }}>{c.offnum + '/' + c.totnum}</div>
                               </div>
-                           })}
+                           })}</> } containerStyle={{ position: "relative", height: "85%", }}
+                           divHeight={"100%"} divId={"chart"}/>
                         </div>
                      </div>
                   </Card>
diff --git a/web/client/src/sections/projectGroup/style.less b/web/client/src/sections/projectGroup/style.less
index c7f0738..e15137d 100644
--- a/web/client/src/sections/projectGroup/style.less
+++ b/web/client/src/sections/projectGroup/style.less
@@ -54,7 +54,7 @@
    color: #3E434E;
    letter-spacing: 0;
    line-height: 14px;
-   text-align: center;
+   // text-align: center;
 }
 .rankDiv{
    width: 34.48px;