|
@@ -141,82 +141,84 @@ const StorageOverview = ({ projectId }) => {
|
|
};
|
|
};
|
|
|
|
|
|
return (
|
|
return (
|
|
- <Spin className="content-title" spinning={loading}>
|
|
|
|
- <div className={`card-box ${styles.tipContent2}`}>
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- display: 'flex',
|
|
|
|
- justifyContent: 'space-between',
|
|
|
|
- alignItems: 'center',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <ModuleTitle title="备品报告:" />
|
|
|
|
- <Button type="primary" onClick={goDetail}>
|
|
|
|
- 详情
|
|
|
|
- </Button>
|
|
|
|
|
|
+ <Spin spinning={loading}>
|
|
|
|
+ <div className="content-tab">
|
|
|
|
+ <div className={`card-box ${styles.tipContent2}`}>
|
|
|
|
+ <div
|
|
|
|
+ style={{
|
|
|
|
+ display: 'flex',
|
|
|
|
+ justifyContent: 'space-between',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <ModuleTitle title="备品报告:" />
|
|
|
|
+ <Button type="primary" onClick={goDetail}>
|
|
|
|
+ 详情
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+ <div style={{ marginTop: '0.2rem' }}>{warningData}</div>
|
|
</div>
|
|
</div>
|
|
- <div style={{ marginTop: '0.2rem' }}>{warningData}</div>
|
|
|
|
- </div>
|
|
|
|
- <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
- <ModuleTitle title="物料种类库存占比" />
|
|
|
|
- <div style={{ height: '3.3rem' }}>
|
|
|
|
- {data?.pieData && <PieChartModule data={data.pieData} />}
|
|
|
|
|
|
+ <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
+ <ModuleTitle title="物料种类库存占比" />
|
|
|
|
+ <div style={{ height: '3.3rem' }}>
|
|
|
|
+ {data?.pieData && <PieChartModule data={data.pieData} />}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
- <ModuleTitle title="物料库存排名前十统计" />
|
|
|
|
- <ul
|
|
|
|
- style={{
|
|
|
|
- height: '3.3rem',
|
|
|
|
- display: 'flex',
|
|
|
|
- flexDirection: 'column',
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- {data?.kind && data.kind.length != 0 ? (
|
|
|
|
- data.kind
|
|
|
|
- ?.sort((a, b) => b.value - a.value)
|
|
|
|
- .map((item) => {
|
|
|
|
- return (
|
|
|
|
- <li
|
|
|
|
- className={styles.li}
|
|
|
|
- key={`kind_${item.item}`}
|
|
|
|
- style={{ flexGrow: 1 }}
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- style={{
|
|
|
|
- width: '0.8rem',
|
|
|
|
- textAlign: 'right',
|
|
|
|
- fontSize: '0.18rem',
|
|
|
|
- whiteSpace: 'nowrap',
|
|
|
|
- }}
|
|
|
|
|
|
+ <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
+ <ModuleTitle title="物料库存排名前十统计" />
|
|
|
|
+ <ul
|
|
|
|
+ style={{
|
|
|
|
+ height: '3.3rem',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ flexDirection: 'column',
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {data?.kind && data.kind.length != 0 ? (
|
|
|
|
+ data.kind
|
|
|
|
+ ?.sort((a, b) => b.value - a.value)
|
|
|
|
+ .map((item) => {
|
|
|
|
+ return (
|
|
|
|
+ <li
|
|
|
|
+ className={styles.li}
|
|
|
|
+ key={`kind_${item.item}`}
|
|
|
|
+ style={{ flexGrow: 1 }}
|
|
>
|
|
>
|
|
- {item.item}
|
|
|
|
- </div>
|
|
|
|
- <div
|
|
|
|
- className={styles.line}
|
|
|
|
- style={{
|
|
|
|
- width: `${(70 * item.value) / data?.maxKind}%`,
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- {item.value}
|
|
|
|
- </li>
|
|
|
|
- );
|
|
|
|
- })
|
|
|
|
- ) : (
|
|
|
|
- <Empty />
|
|
|
|
- )}
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
- <ModuleTitle title="物料报废统计" />
|
|
|
|
- <div style={{ height: '4.4rem' }}>
|
|
|
|
- {data?.radarData && <RadarChartModule {...data.radarData} />}
|
|
|
|
|
|
+ <div
|
|
|
|
+ style={{
|
|
|
|
+ width: '0.8rem',
|
|
|
|
+ textAlign: 'right',
|
|
|
|
+ fontSize: '0.18rem',
|
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {item.item}
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ className={styles.line}
|
|
|
|
+ style={{
|
|
|
|
+ width: `${(70 * item.value) / data?.maxKind}%`,
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ {item.value}
|
|
|
|
+ </li>
|
|
|
|
+ );
|
|
|
|
+ })
|
|
|
|
+ ) : (
|
|
|
|
+ <Empty />
|
|
|
|
+ )}
|
|
|
|
+ </ul>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
- <ModuleTitle title="出入库统计" />
|
|
|
|
- <div style={{ height: '4rem' }}>
|
|
|
|
- {data?.barData && <BarChartModule {...data.barData} />}
|
|
|
|
|
|
+ <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
+ <ModuleTitle title="物料报废统计" />
|
|
|
|
+ <div style={{ height: '4.4rem' }}>
|
|
|
|
+ {data?.radarData && <RadarChartModule {...data.radarData} />}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className={`card-box ${styles.itemContent}`}>
|
|
|
|
+ <ModuleTitle title="出入库统计" />
|
|
|
|
+ <div style={{ height: '4rem' }}>
|
|
|
|
+ {data?.barData && <BarChartModule {...data.barData} />}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
</Spin>
|