Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

web/client/src/sections/console/containers/console.jsx

@@ -12,6 +12,7 @@ let memberScrollbar;
 let equipmentScrollbar;
 let webScrollbar;
 let problemsScrollbar;
+let alarmScrollbar;
 
 
 const Console = (props) => {
@@ -78,6 +79,13 @@ const Console = (props) => {
       if (domProject5 && problemsScrollbar) {
          problemsScrollbar.update();
       }
+      alarmScrollbar = new PerfectScrollbar("#alarm", {
+         suppressScrollY: true,
+      });
+      const domProject6 = document.getElementById("alarm");
+      if (domProject6 && alarmScrollbar) {
+         alarmScrollbar.update();
+      }
 
       // ACTION 示例
       //   dispatch(actions.example.getMembers(user.orgId))
@@ -99,7 +107,7 @@ const Console = (props) => {
 
    return (
       <>
-            <div style={{ padding: '0px 40px' }} className='console'>
+         <div style={{ padding: '0px 40px', width: '100%' }} className='console'>
             {/* 头部 */}
             <div style={{ margin: '4px 0px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -115,11 +123,11 @@ const Console = (props) => {
                </div>
             </div>
             {/* 主体 */}
-                <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex', width: '100%' }}>
                {/* 左边 */}
-                    <div style={{ width: 1464 }}>
+               <div style={{ width: 'calc(100% - 434px)' }}>
                   {/* 工作台和统计概览 */}
-                        <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 24 }}>
+                  <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 24px' }}>
                      {/* 我的工作台 */}
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -164,10 +172,10 @@ const Console = (props) => {
                            </div>
                         </div>
                         {/* 循环类型 */}
-                                {
-                                    stationList.map((item, index) => {
+                        <div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}>
+                           {stationList.map((item, index) => {
                               return (
-                                            <div key={item} style={{ background: item, backgroundSize: "100% 100%", width: 270, height: 135, marginRight: 26 }}>
+                                 <div key={item} style={{ background: item, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}>
                                     <div style={{ margin: '35px 0px 0px 134px' }}>
                                        <div>
                                           <span style={{ fontSize: 14, color: '#4A4A4A' }}>关注的项目</span>
@@ -183,6 +191,7 @@ const Console = (props) => {
                            })
                            }
                         </div>
+                     </div>
                      {/* 统计概览 */}
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 25 }}>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -384,9 +393,9 @@ const Console = (props) => {
                   </div>
                </div>
                {/* 右边 */}
-                    <div style={{ width: 365, marginLeft: 20 }}>
+               <div style={{ width: 415, marginLeft: 20 }}>
                   {/* 最新动态 */}
-                        <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 21, height: 639, }}>
+                  <div style={{ width: 415, background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 21, height: 639, }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
                            <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
@@ -398,10 +407,10 @@ const Console = (props) => {
                         </div>
                      </div>
                      <div id='news' style={{ height: 578, position: 'relative', marginTop: 10, }}>
-                                <Timeline mode="center" style={{ marginLeft: '-56px' }}>
+                        <Timeline mode="center" style={{ marginLeft: '-56px', width: 400 }}>
                            {timelineList.map((item, index) => {
                               return (
-                                            <Timeline.Item key={index+'time'} time="2019-07-14 10:35" className={index % 2 == 0 ? 'even' : 'odd'} >
+                                 <Timeline.Item key={index + 'time'} position='left' time="2019-07-14 10:35" className={index % 2 == 0 ? 'even' : 'odd'} >
                                     A项目DTU设备状态异常，诊断为离线
                                  </Timeline.Item>
                               )