Skip to content

M
mes-kanban
Commit 6274c4e9 authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

第三个看板

parent 7b2e0976
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 58 deletions
src/pages/kanban/ProductionProgress/components/ProgressTable/index.less
View file @ 6274c4e9
...@@ -68,7 +68,12 @@ div.no_right_border { ...@@ -68,7 +68,12 @@ div.no_right_border {
&:extend(.row_section); &:extend(.row_section);
} }
.other_data { .other_data {
width: 100%;
}
.processlist {
display: flex;
width: calc(100% - 132px) !important; width: calc(100% - 132px) !important;
flex-direction: column;
} }
.row_segment1_section4_header { .row_segment1_section4_header {
width: calc(100% - 160px - 100px - 132px); width: calc(100% - 160px - 100px - 132px);
...@@ -110,7 +115,11 @@ div.no_right_border { ...@@ -110,7 +115,11 @@ div.no_right_border {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
} }
.scrollMain {
height: calc(100% - 72px);
width: 100%;
overflow: hidden;
}
.leftWrapper { .leftWrapper {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
......
src/pages/kanban/ProductionProgress/components/ProgressTable/index.tsx
View file @ 6274c4e9
...@@ -25,14 +25,12 @@ const ProgressTable: React.FC<ProgressTableProps> = ({ ...@@ -25,14 +25,12 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
const leftScroll = useRef<HTMLDivElement>(null); const leftScroll = useRef<HTMLDivElement>(null);
let timer: NodeJS.Timer | null = null; let timer: NodeJS.Timer | null = null;
const intl = useIntl(); const intl = useIntl();
useEffect(() => { useEffect(() => {
const list = [] setDisplayData(data.taskPlanDayList || [])
list.push(...(data.taskPlanDayList || []))
setDisplayData(list)
stopLoop() stopLoop()
startLoop() startLoop()
return () => { return () => {
...@@ -54,10 +52,11 @@ const ProgressTable: React.FC<ProgressTableProps> = ({ ...@@ -54,10 +52,11 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
} }
const startLoop = () => { const startLoop = () => {
stopLoop(); stopLoop();
if (leftScroll && leftScroll.current && leftScroll.scrollTop) { if (leftScroll && leftScroll.current) {
timer = setInterval(() => { timer = setInterval(() => {
let scrollTop = leftScroll.current.scrollTop 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({ leftScroll.current.scrollTo({
top: 0, top: 0,
behavior: 'instant', behavior: 'instant',
...@@ -90,61 +89,66 @@ const ProgressTable: React.FC<ProgressTableProps> = ({ ...@@ -90,61 +89,66 @@ const ProgressTable: React.FC<ProgressTableProps> = ({
</div> </div>
</div> </div>
</div> </div>
<div ref={leftScroll} className={styles.leftWrapper} > <div className={styles.scrollMain}>
{displayData.map((node: any, index: number) => ( <div ref={leftScroll} className={styles.leftWrapper} >
<div {displayData.map((node: any, index: number) => (
className={styles.row_container} <div
key={index} className={styles.row_container}
> key={index}
<div className={styles.row_segment1}> >
<div <div className={styles.row_segment1}>
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 <div
className={styles.row_section} className={styles.row_segment1_section1}
style={{ width: row_segment2_section_width }}
key={step.code}
> >
<StepCell step={step} data={node.data} lineName={lineName} /> <div className={styles.cell}>{node['startDate']}</div>
</div> </div>
))} <div className={styles.processlist}>
</div> */} {node.productList.map((item: any, index1: number) => (
</div> <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>
</div> </div>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment