添加设备总览页面

.umirc.ts

@@ -148,10 +148,15 @@ export default defineConfig({
       component: './DeviceManager',
     },
     {
-      name: '设备管理详情',
+      name: '出入库管理详情',
       path: '/device/detail/:projectId/:type',
       component: './DeviceManager/detail',
     },
+    {
+      name: '备品管理总览',
+      path: '/device/storage/:projectId',
+      component: './DeviceManager/storage',
+    },
     {
       name: '安全管理',
       path: '/safety/:projectId', ///safety management

src/components/ManagementPage/BarChartModule.js

@@ -11,14 +11,13 @@ props：{
 }
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const BarChartModule = props => {
+const BarChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { xData, dataList } = props;
@@ -48,7 +47,8 @@ const BarChartModule = props => {
   };
 
   const getStyle = () => {
-    if (dataList && dataList.length != 0) return { width: '100%', height: '100%' };
+    if (dataList && dataList.length != 0)
+      return { width: '100%', height: '100%' };
     else return { width: '100%', height: '100%', display: 'none' };
   };
 
@@ -99,12 +99,10 @@ const defaultOption = {
     axisLine: {
       show: false,
     },
-
   },
   legend: {
     icon: 'circle',
     right: '20%',
-   
   },
   series: [
     {

src/components/ManagementPage/PieChartModule.js

@@ -8,14 +8,13 @@ data: [
       ],
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const PieChartModule = props => {
+const PieChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { data } = props;
@@ -68,7 +67,7 @@ const defaultOption = {
     trigger: 'item',
     formatter: '{b} : {d}% ({c})',
   },
- 
+
   series: [
     {
       type: 'pie',

src/components/ManagementPage/RadarChartModule.js

@@ -17,14 +17,13 @@ props：{
 }
 */
 
-import { useEffect, useRef, useState } from 'react';
-import echarts from 'echarts';
-import styles from './index.less';
-import dayjs from 'dayjs';
 import { Empty } from 'antd';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import styles from './index.less';
 
 //图表模块
-const RadarChartModule = props => {
+const RadarChartModule = (props) => {
   const chartDomRef = useRef();
   const chartRef = useRef();
   const { indicator, data, name = '' } = props;

src/components/ManagementPage/index.less

@@ -1,13 +1,16 @@
 .icon {
   float: left;
-  width: 8px;
+  width: 4px;
   height: 30px;
+  margin: 7px 0;
   background-color: #366cda;
 }
 .title {
-  color: #c9d2d2;
-  font-size: 22px;
-  padding-left: 14px;
+  padding-left: 8px;
+  font-size: 30px;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 40px;
 }
 .right {
   color: #366cda;

src/pages/DeviceManager/index.less

@@ -2,6 +2,19 @@
   position: absolute;
   right: 0;
 }
+.li {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  color: #000000;
+  font-size: 24px;
+}
+.line {
+  margin: 0 20px;
+  height: 24px;
+  border-radius: 12px;
+  background: linear-gradient(to right, #4279e5, #372cc9);
+}
 .titleContent {
   position: relative;
   display: flex;

src/pages/DeviceManager/storage.js

@@ -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;