fix 控制台滚动

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

@@ -100,6 +100,50 @@ const Control = (props) => {
          })
       }
       concentration2()
+
+      const domProject = document.getElementById("news");
+      if (domProject) {
+         newScrollbar = new PerfectScrollbar("#news", {
+            suppressScrollX: true,
+         });
+      }
+
+      const domProject2 = document.getElementById("member");
+      if (domProject2) {
+         memberScrollbar = new PerfectScrollbar("#member", {
+            suppressScrollX: true,
+         });
+      }
+
+      const domProject3 = document.getElementById("equipment");
+      if (domProject3) {
+         equipmentScrollbar = new PerfectScrollbar("#equipment", {
+            suppressScrollX: true,
+         });
+      }
+
+      const domProject4 = document.getElementById("web");
+      if (domProject4) {
+         webScrollbar = new PerfectScrollbar("#web", {
+            suppressScrollX: true,
+         })
+      }
+
+      const domProject5 = document.getElementById("problems");
+      if (domProject5) {
+         problemsScrollbar = new PerfectScrollbar("#problems", {
+            suppressScrollX: true,
+         });
+      }
+
+      const domProject6 = document.getElementById("alarm");
+      if (domProject6) {
+         alarmScrollbar = new PerfectScrollbar("#alarm", {
+            suppressScrollY: true,
+         });
+      }
+
+
       return () => {
 
       }
@@ -271,6 +315,25 @@ const Control = (props) => {
          }
       }
       concentration3()
+
+      const domProject1 = document.getElementById("overviewCalc");
+      if (domProject1) {
+         overviewScrollbar = new PerfectScrollbar("#overviewCalc", {
+            suppressScrollY: true,
+         });
+      }
+      const pomsList = document.getElementById("pomsList");
+      if (pomsList) {
+         pomsListScrollbar = new PerfectScrollbar("#pomsList", {
+            suppressScrollX: true,
+         });
+      }
+      const domProject5 = document.getElementById("problems");
+      if (domProject5) {
+         problemsScrollbar = new PerfectScrollbar("#problems", {
+            suppressScrollX: true,
+         });
+      }
    }, [pepProjectId, exhibition.current])
 
    useEffect(() => {
@@ -342,9 +405,9 @@ const Control = (props) => {
 
       const domProject = document.getElementById("news");
       if (domProject) {
-         newScrollbar = new PerfectScrollbar("#news", {
+         // newScrollbar = new PerfectScrollbar("#news", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         });
+         // });
          if (domProject && newScrollbar) {
             newScrollbar.update();
          }
@@ -352,19 +415,19 @@ const Control = (props) => {
 
       const pomsList = document.getElementById("pomsList");
       if (pomsList) {
-         pomsListScrollbar = new PerfectScrollbar("#pomsList", {
+         // pomsListScrollbar = new PerfectScrollbar("#pomsList", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         });
+         // });
          if (pomsList && pomsListScrollbar) {
             pomsListScrollbar.update();
          }
       }
 
-      const domProject1 = document.getElementById("overview");
+      const domProject1 = document.getElementById("overviewCalc");
       if (domProject1) {
-         overviewScrollbar = new PerfectScrollbar("#overview", {
+         // overviewScrollbar = new PerfectScrollbar("#overviewCalc", {
-            suppressScrollY: true,
+         //    suppressScrollY: true,
-         });
+         // });
          if (domProject1 && overviewScrollbar) {
             overviewScrollbar.update();
          }
@@ -372,9 +435,9 @@ const Control = (props) => {
 
       const domProject2 = document.getElementById("member");
       if (domProject2) {
-         memberScrollbar = new PerfectScrollbar("#member", {
+         // memberScrollbar = new PerfectScrollbar("#member", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         });
+         // });
          if (domProject2 && memberScrollbar) {
             memberScrollbar.update();
          }
@@ -382,9 +445,9 @@ const Control = (props) => {
 
       const domProject3 = document.getElementById("equipment");
       if (domProject3) {
-         equipmentScrollbar = new PerfectScrollbar("#equipment", {
+         // equipmentScrollbar = new PerfectScrollbar("#equipment", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         });
+         // });
          if (domProject3 && equipmentScrollbar) {
             equipmentScrollbar.update();
          }
@@ -392,9 +455,9 @@ const Control = (props) => {
 
       const domProject4 = document.getElementById("web");
       if (domProject4) {
-         webScrollbar = new PerfectScrollbar("#web", {
+         // webScrollbar = new PerfectScrollbar("#web", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         })
+         // })
          if (domProject4 && webScrollbar) {
             webScrollbar.update();
          }
@@ -402,9 +465,9 @@ const Control = (props) => {
 
       const domProject5 = document.getElementById("problems");
       if (domProject5) {
-         problemsScrollbar = new PerfectScrollbar("#problems", {
+         // problemsScrollbar = new PerfectScrollbar("#problems", {
-            suppressScrollX: true,
+         //    suppressScrollX: true,
-         });
+         // });
          if (domProject5 && problemsScrollbar) {
             problemsScrollbar.update();
          }
@@ -412,9 +475,9 @@ const Control = (props) => {
 
       const domProject6 = document.getElementById("alarm");
       if (domProject6) {
-         alarmScrollbar = new PerfectScrollbar("#alarm", {
+         // alarmScrollbar = new PerfectScrollbar("#alarm", {
-            suppressScrollY: true,
+         //    suppressScrollY: true,
-         });
+         // });
          if (domProject6 && alarmScrollbar) {
             alarmScrollbar.update();
          }
@@ -634,7 +697,8 @@ const Control = (props) => {
 
 
                      {/* 统计概览 */}
-                     {exhibition.current?.overall?.find(v => v.key == 'statistical') ? <>
+                     {
+                     exhibition.current?.overall?.find(v => v.key == 'statistical') ? <>
                         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 25 }}>
                            <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>
@@ -651,10 +715,15 @@ const Control = (props) => {
                            </div>
                         </div>
                         {/* 统计概览 */}
-                        <div id='overview' style={{ position: 'relative' }}>
+                        <div id='overviewCalc' style={{ width: 'calc(100% - 200px)', position: 'relative' }}>
                            <div style={{ display: 'inline-flex', marginTop: 16 }}>
                               {/* 项目 */}
-                              {pepProjectId ? '' : <div id='pomsList' style={{ marginRight: 20, paddingRight: 24, position: 'relative', marginBottom: 30, width: 410, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
+                              {
+                                 pepProjectId ?
+                                    '' :
+                                    <div id='pomsList' style={{
+                                       marginRight: 20, paddingRight: 24, position: 'relative', marginBottom: 30, width: 410, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2
+                                    }}>
                                        {pomsList?.map((v, index) => {
                                           return <div key={'pomsList' + index} title={v.pepProjectName}
                                              style={{
@@ -666,8 +735,12 @@ const Control = (props) => {
                                     </div>}
 
                               {/* 项目里程碑 */}
-                              {exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId && projectData?.find(u => u.id == projectId)?.pepProjectName ?
+                              {
-                                 <div style={{ marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2 }}>
+                                 exhibition.current?.statistical?.find(v => v.key == 'milestone') && projectId &&
+                                    projectData?.find(u => u.id == projectId)?.pepProjectName ?
+                                    <div style={{
+                                       marginBottom: 30, width: 466, height: 221, border: '1px solid rgba(220,222,224,0.2)', boxShadow: '0px 2px 12px 1px #F2F3F5', borderRadius: 2
+                                    }}>
                                        <div style={{ margin: '20px 0px 20px 24px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
                                           项目里程碑
                                        </div>