第三个看板

src/pages/kanban/ProductionProgress/components/ProgressTable/index.less

@@ -68,7 +68,12 @@ div.no_right_border {
   &:extend(.row_section);
 }
 .other_data {
+  width: 100%;
+}
+.processlist {
+  display: flex;
   width: calc(100% - 132px) !important;
+  flex-direction: column;
 }
 .row_segment1_section4_header {
   width: calc(100% - 160px - 100px - 132px);
@@ -110,7 +115,11 @@ div.no_right_border {
   word-wrap: break-word;
   word-break: break-all;
 }
-
+.scrollMain {
+  height: calc(100% - 72px);
+  width: 100%;
+  overflow: hidden;
+}
 .leftWrapper {
   height: 100%;
   overflow: auto;

src/pages/kanban/ProductionProgress/components/ProgressTable/index.tsx

@@ -25,14 +25,12 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
   const leftScroll = useRef<HTMLDivElement>(null);
   let timer: NodeJS.Timer | null = null;
   const intl = useIntl();
-
+  
 
 
 
   useEffect(() => {
-    const list = []
-    list.push(...(data.taskPlanDayList || []))
-    setDisplayData(list)
+    setDisplayData(data.taskPlanDayList || [])
     stopLoop()
     startLoop()
     return () => {
@@ -54,10 +52,11 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
   }
   const startLoop = () => {
     stopLoop();
-    if (leftScroll && leftScroll.current && leftScroll.scrollTop) {
+    if (leftScroll && leftScroll.current) {
       timer = setInterval(() => {
         let scrollTop = leftScroll.current.scrollTop
-        if (scrollTop + 60 + leftScroll.current.offsetHeight >= leftScroll.current.scrollHeight) {
+        console.log(scrollTop, leftScroll.current.offsetHeight, leftScroll.current.scrollHeight)
+        if (scrollTop + leftScroll.current.offsetHeight + 5 >= leftScroll.current.scrollHeight) {
           leftScroll.current.scrollTo({
             top: 0, 
             behavior: 'instant',
@@ -90,61 +89,66 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
           </div>
         </div>
       </div>
-      <div ref={leftScroll} className={styles.leftWrapper} >
-        {displayData.map((node: any, index: number) => (
-          <div
-            className={styles.row_container}
-            key={index}
-          >
-            <div className={styles.row_segment1}>
-              <div
-                className={styles.row_segment1_section1}
-              >
-                <div className={styles.cell}>{node['startDate']}</div>
-              </div>
-              {node.productList.map((item) => (
-                <div className={`${styles.row_container} ${styles.other_data}`}>
-                  <div className={styles.row_segment1_section2}>
-                    <div className={styles.cell}>{item.itemCode}</div>
-                  </div>
-                  <div className={styles.row_segment1_section3}>
-                    <div className={styles.cell}>{item.planQuantity}</div>
-                  </div>
-                  <div className={styles.row_segment1_section4}>
-                    {item.processList.map((processitem) => (
-                      <div className={styles.process_item} style={{
-                          height: rowHight,
-                          background: processitem.state === 2 ? '#ff0000' : processitem.state === 1 ? '#009242' : 'transparent'
-                        }}>
-                        <div className={styles.cell}>{processitem.processName}</div>
-                        <div className={styles.process_value}>
-                          <div className={styles.cell}>{processitem.reportQuantity}</div>
-                          <div className={styles.cell}>{processitem.qualifyQuantity}</div>
-                          <div className={styles.cell}>{processitem.qualifiedRate}%</div>
-                        </div>
-                        
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-                
-            </div>
-            {/* 
-            <div className={styles.row_segment2}>
-              {lineName.progress.steps.map((step) => (
+      <div className={styles.scrollMain}>
+        <div ref={leftScroll} className={styles.leftWrapper} >
+          {displayData.map((node: any, index: number) => (
+            <div
+              className={styles.row_container}
+              key={index}
+            >
+              <div className={styles.row_segment1}>
                 <div
-                  className={styles.row_section}
-                  style={{ width: row_segment2_section_width }}
-                  key={step.code}
+                  className={styles.row_segment1_section1}
                 >
-                  <StepCell step={step} data={node.data} lineName={lineName} />
+                  <div className={styles.cell}>{node['startDate']}</div>
                 </div>
-              ))}
-            </div> */}
-          </div>
-        ))}
+                <div className={styles.processlist}>
+                  {node.productList.map((item: any, index1: number) => (
+                    <div className={`${styles.row_container} ${styles.other_data}`} key={'processitem' + index1}>
+                      <div className={styles.row_segment1_section2}>
+                        <div className={styles.cell}>{item.itemCode}</div>
+                      </div>
+                      <div className={styles.row_segment1_section3}>
+                        <div className={styles.cell}>{item.planQuantity}</div>
+                      </div>
+                      <div className={styles.row_segment1_section4}>
+                        {item.processList.map((processitem: any, processindex: number) => (
+                          <div className={styles.process_item} key={processindex} style={{
+                              height: rowHight,
+                              background: processitem.state === 2 ? '#ff0000' : processitem.state === 1 ? '#009242' : 'transparent'
+                            }}>
+                            <div className={styles.cell}>{processitem.processName}</div>
+                            <div className={styles.process_value}>
+                              <div className={styles.cell}>{processitem.reportQuantity}</div>
+                              <div className={styles.cell}>{processitem.qualifyQuantity}</div>
+                              <div className={styles.cell}>{processitem.qualifiedRate}%</div>
+                            </div>
+                            
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                  
+              </div>
+              {/* 
+              <div className={styles.row_segment2}>
+                {lineName.progress.steps.map((step) => (
+                  <div
+                    className={styles.row_section}
+                    style={{ width: row_segment2_section_width }}
+                    key={step.code}
+                  >
+                    <StepCell step={step} data={node.data} lineName={lineName} />
+                  </div>
+                ))}
+              </div> */}
+            </div>
+          ))}
+        </div>
       </div>
+      
     </div>
   );
 };