|
@@ -0,0 +1,276 @@
|
|
|
|
+import BarChartModule from '@/components/ManagementPage/BarChartModule';
|
|
|
|
+import PieChartModule from '@/components/ManagementPage/PieChartModule';
|
|
|
|
+import RadarChartModule from '@/components/ManagementPage/RadarChartModule';
|
|
|
|
+import ModuleTitle from '@/components/ManagementPage/moduleTitle';
|
|
|
|
+import PageContent from '@/components/PageContent';
|
|
|
|
+import PageTitle from '@/components/PageTitle';
|
|
|
|
+import { queryMainChartList } from '@/services/StorageManagement';
|
|
|
|
+import { useParams, useRequest } from '@umijs/max';
|
|
|
|
+import { Empty, Select, Spin } from 'antd';
|
|
|
|
+import moment from 'moment';
|
|
|
|
+import { useRef } from 'react';
|
|
|
|
+import styles from './index.less';
|
|
|
|
+const { Option } = Select;
|
|
|
|
+
|
|
|
|
+const StorageOverview = () => {
|
|
|
|
+ const { projectId } = useParams();
|
|
|
|
+ const yearRef = useRef(Number(moment().format('YYYY')));
|
|
|
|
+ const monthRef = useRef(0);
|
|
|
|
+ const statistics = [
|
|
|
|
+ {
|
|
|
|
+ title: '在库数量(个)',
|
|
|
|
+ key: 'on_amount',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '入库数量(个)',
|
|
|
|
+ key: 'in_amount',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '出库数量(个)',
|
|
|
|
+ key: 'out_amount',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '报废数量(个)',
|
|
|
|
+ key: 'scrap_amount',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '报警数量(个)',
|
|
|
|
+ key: 'warning_stat',
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ const colors = ['#E1943A', '#5BE46D', '#FF976F', '#6589FC', '#9863F9'];
|
|
|
|
+
|
|
|
|
+ const topTen = [
|
|
|
|
+ {
|
|
|
|
+ name: '你好',
|
|
|
|
+ value: '100',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '进水阀',
|
|
|
|
+ value: '73',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '70',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '65',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '60',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '50',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '45',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '40',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '38',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'hahah',
|
|
|
|
+ value: '33',
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+
|
|
|
|
+ const props1 = {
|
|
|
|
+ yName: '水量(t)',
|
|
|
|
+ xData: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30'],
|
|
|
|
+ dataList: [
|
|
|
|
+ {
|
|
|
|
+ type: 0,
|
|
|
|
+ name: '进水水量',
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 0,
|
|
|
|
+ name: '进水水量111',
|
|
|
|
+ data: [420, 932, 601, 934, 1990, 1330, 1520],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 1,
|
|
|
|
+ name: '预测出水量',
|
|
|
|
+ data: [720, 832, 601, 834, 1190, 1230, 1220],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 2,
|
|
|
|
+ name: '实际出水量',
|
|
|
|
+ data: [820, 632, 501, 534, 1190, 1130, 1120],
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const { data, run, loading } = useRequest(
|
|
|
|
+ () =>
|
|
|
|
+ queryMainChartList({
|
|
|
|
+ project_id: Number(projectId),
|
|
|
|
+ year: yearRef.current,
|
|
|
|
+ month: monthRef.current,
|
|
|
|
+ }),
|
|
|
|
+ {
|
|
|
|
+ formatResult: (res) => {
|
|
|
|
+ const data = res.data;
|
|
|
|
+ console.log('--------------------', data);
|
|
|
|
+ const values =
|
|
|
|
+ data?.scrap?.length > 0
|
|
|
|
+ ? data?.scrap?.map((item) => item.value)
|
|
|
|
+ : [0];
|
|
|
|
+ const radarMax = Math.max(...values);
|
|
|
|
+ return {
|
|
|
|
+ maxKind:
|
|
|
|
+ data?.kind?.length > 0
|
|
|
|
+ ? data?.kind?.sort((a, b) => b.value - a.value)[0].value
|
|
|
|
+ : 1,
|
|
|
|
+ kind: data.kind,
|
|
|
|
+ statistics: statistics.map((item) => {
|
|
|
|
+ return { ...item, value: data[item.key] };
|
|
|
|
+ }),
|
|
|
|
+ barData:
|
|
|
|
+ data?.in?.length > 0 && data?.out?.length > 0
|
|
|
|
+ ? {
|
|
|
|
+ xData: data.in?.map((cur) => cur.item),
|
|
|
|
+ dataList: [
|
|
|
|
+ {
|
|
|
|
+ name: '入库',
|
|
|
|
+ data: data.in?.map((cur) => cur.value),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '出库',
|
|
|
|
+ data: data.out?.map((cur) => cur.value),
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ : {},
|
|
|
|
+ pieData: data?.rank?.map((cur) => {
|
|
|
|
+ return { name: cur.item, value: cur.value };
|
|
|
|
+ }),
|
|
|
|
+ radarData:
|
|
|
|
+ data?.scrap?.length > 0
|
|
|
|
+ ? {
|
|
|
|
+ indicator: data?.scrap?.map((item) => {
|
|
|
|
+ return { name: item.item, max: radarMax };
|
|
|
|
+ }),
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ value: data?.scrap?.map((item) => {
|
|
|
|
+ return item.value;
|
|
|
|
+ }),
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ : {},
|
|
|
|
+ lineData:
|
|
|
|
+ data?.on?.length > 0 && data.check?.length > 0
|
|
|
|
+ ? {
|
|
|
|
+ closeTime: true,
|
|
|
|
+ yName: '数量',
|
|
|
|
+ xData: data.on?.map((item) => item.item),
|
|
|
|
+ dataList: [
|
|
|
|
+ {
|
|
|
|
+ type: 2,
|
|
|
|
+ name: '库存',
|
|
|
|
+ data: data.on?.map((item) => item.value),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: 1,
|
|
|
|
+ name: '盘点',
|
|
|
|
+ data: data.check?.map((item) => item.value),
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ : null,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ const ItemContent = ({ idx, title, value }) => {
|
|
|
|
+ return (
|
|
|
|
+ <div className={styles.item} style={{ backgroundColor: colors[idx] }}>
|
|
|
|
+ <div className={styles.item_title}>{title}</div>
|
|
|
|
+ <div className={styles.item_num}>{value}</div>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
+ return (
|
|
|
|
+ <PageContent>
|
|
|
|
+ <PageTitle children="备品统计" returnable />
|
|
|
|
+ <div className={styles.main}>
|
|
|
|
+ <Spin spinning={loading}>
|
|
|
|
+ <ModuleTitle title="物料种类库存占比" />
|
|
|
|
+ <div style={{ height: '330px' }}>
|
|
|
|
+ {data?.pieData && <PieChartModule data={data.pieData} />}
|
|
|
|
+ </div>
|
|
|
|
+ <div className={styles.thereItem}>
|
|
|
|
+ <ModuleTitle title="物料库存排名前十统计" />
|
|
|
|
+ <ul
|
|
|
|
+ style={{
|
|
|
|
+ height: '330px',
|
|
|
|
+ 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: '80px',
|
|
|
|
+ textAlign: 'right',
|
|
|
|
+ fontSize: '18px',
|
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {item.item}
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ className={styles.line}
|
|
|
|
+ style={{
|
|
|
|
+ width: `${(70 * item.value) / data?.maxKind}%`,
|
|
|
|
+ }}
|
|
|
|
+ ></div>
|
|
|
|
+ {item.value}
|
|
|
|
+ </li>
|
|
|
|
+ );
|
|
|
|
+ })
|
|
|
|
+ ) : (
|
|
|
|
+ <Empty />
|
|
|
|
+ )}
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div className={styles.thereItem}>
|
|
|
|
+ <ModuleTitle title="物料报废统计" />
|
|
|
|
+ <div style={{ height: '330px' }}>
|
|
|
|
+ {data?.radarData && <RadarChartModule {...data.radarData} />}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div className={styles.twoItem}>
|
|
|
|
+ <ModuleTitle title="出入库统计" />
|
|
|
|
+ <div style={{ height: '330px' }}>
|
|
|
|
+ {data?.barData && <BarChartModule {...data.barData} />}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </Spin>
|
|
|
|
+ </div>
|
|
|
|
+ </PageContent>
|
|
|
|
+ );
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+export default StorageOverview;
|