第三个看板

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

@@ -30,9 +30,7 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
 
 
   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,6 +89,7 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
           </div>
         </div>
       </div>
+      <div className={styles.scrollMain}>
         <div ref={leftScroll} className={styles.leftWrapper} >
           {displayData.map((node: any, index: number) => (
             <div
@@ -102,8 +102,9 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
                 >
                   <div className={styles.cell}>{node['startDate']}</div>
                 </div>
-              {node.productList.map((item) => (
-                <div className={`${styles.row_container} ${styles.other_data}`}>
+                <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>
@@ -111,8 +112,8 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
                         <div className={styles.cell}>{item.planQuantity}</div>
                       </div>
                       <div className={styles.row_segment1_section4}>
-                    {item.processList.map((processitem) => (
-                      <div className={styles.process_item} style={{
+                        {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'
                             }}>
@@ -128,6 +129,7 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
                       </div>
                     </div>
                   ))}
+                </div>
                   
               </div>
               {/* 
@@ -146,6 +148,8 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
           ))}
         </div>
       </div>
+      
+    </div>
   );
 };