计划看板

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

@@ -46,18 +46,45 @@ div.no_right_border {
 }
 
 .row_segment1 {
-  width: 30%;
+  width: 100%;
   font-size: 22px;
   &:extend(.row_segment);
 }
 .row_segment1_section1 {
-  width: 86%;
+  width: 132px;
   &:extend(.row_section);
 }
 .row_segment1_section2 {
-  width: 14%;
+  width: 150px;
+  &:extend(.row_section);
+}
+.row_segment1_section3 {
+  width: 100px;
   &:extend(.row_section);
 }
+.other_data {
+  width: calc(100% - 132px) !important;
+}
+.row_segment1_section4_header {
+  width: calc(100% - 150px - 100px - 132px);
+  &:extend(.row_section);
+}
+.row_segment1_section4 {
+  width: calc(100% - 150px - 100px);
+  &:extend(.row_section);
+  display: flex;
+  flex-wrap: wrap;
+}
+.process_item {
+  width: calc(100% / 4) !important;
+}
+.process_value {
+  display: flex;
+  width: 100%;
+  &>div {
+    width: calc(100% / 3) !important;
+  }
+}
 
 .row_segment2 {
   width: 70%;

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

@@ -25,27 +25,6 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
   conditionKey,
   rowMovingTime,
 }) => {
-  data = {
-    "taskPlanDayList": [
-      {
-        "productList": [
-          {
-            "itemCode": "",
-            "planQuantity": "",
-            "processList": [
-              {
-                "processName": "",
-                "qualifiedRate": 0,
-                "qualifyQuantity": 0,
-                "reportQuantity": 0
-              }
-            ]
-          }
-        ],
-        "startDate": ""
-      }
-    ]
-  }
   const rowHight = 60;
   const displayCount = 13;
 
@@ -67,13 +46,14 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
       sData.slice(0, endAt2).forEach((i) => ret.push(i));
     }
     setDisplayData(ret);
+    console.log('res', ret)
   };
 
   useEffect(() => {
     if (lastConditionKey !== conditionKey) {
       setLastConditionKey(conditionKey);
       setDisplayAt(0);
-      updateDisplayData(0, data);
+      updateDisplayData(0, data.taskPlanDayList);
     }
   }, [conditionKey, lastConditionKey, data]);
 
@@ -89,7 +69,7 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
       }
     }
     setDisplayAt(da);
-    updateDisplayData(da, data);
+    updateDisplayData(da, data.taskPlanDayList);
   }, [data, displayAt, pause]);
 
   useEffect(() => {
@@ -129,17 +109,17 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
           <div className={`${styles.row_segment1_section2} ${styles.no_top_border}`}>
             <div className={styles.cell}>产品</div>
           </div>
-          <div className={`${styles.row_segment1_section2} ${styles.no_top_border}`}>
+          <div className={`${styles.row_segment1_section3} ${styles.no_top_border}`}>
             <div className={styles.cell}>计划数</div>
           </div>
-          <div className={`${styles.row_segment1_section2} ${styles.no_top_border} ${styles.no_right_border}`}>
+          <div className={`${styles.row_segment1_section4_header} ${styles.no_top_border} ${styles.no_right_border}`}>
             <div className={styles.cell}>工序</div>
           </div>
         </div>
       </div>
       <NodeGroup
         data={displayData}
-        keyAccessor={(d) => d.aufnr}
+        keyAccessor={(d) => d.startDate}
         start={(d, i) => {
           return { y: i * rowHight, opacity: 0 };
         }}
@@ -167,6 +147,8 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
               setPause(false);
               setScollOnce(true);
             }}
+            
+            onClick={()=>{console.log('nodes', nodes)}}
           >
             {nodes.map((node: { [key: string]: any; data: ProductionProgressKanbanData }) => (
               <div
@@ -174,24 +156,47 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
                 key={node.key}
                 style={{
                   position: 'absolute',
+                  // width: '100%',
                   left: 0,
                   top: 0,
-                  width: '100%',
-                  height: rowHight,
                   transform: `translate(0px, ${node.state.y}px)`,
                   opacity: node.state.opacity,
                 }}
               >
-                {/* <div className={styles.row_segment1}>
+                <div className={styles.row_segment1}>
                   <div
                     className={styles.row_segment1_section1}
                   >
-                    <div className={styles.cell}>{node.data[lineName.sgNoSourceType.code]}</div>
-                  </div>
-                  <div className={styles.row_segment1_section2}>
-                    <div className={styles.cell}>{node.data.planQuantity}</div>
+                    <div className={styles.cell}>{node.data['startDate']}</div>
                   </div>
+                  {node.data.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
+                            }}>
+                            <div className={styles.cell}>{processitem.processName}</div>
+                            <div className={styles.process_value}>
+                              <div className={styles.cell}>{processitem.planQuantity}</div>
+                              <div className={styles.cell}>{processitem.planQuantity}</div>
+                              <div className={styles.cell}>{processitem.planQuantity}</div>
+                            </div>
+                            
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                    
                 </div>
+                {/* 
                 <div className={styles.row_segment2}>
                   {lineName.progress.steps.map((step) => (
                     <div