优化loading

src/pages/DeviceManager/detail.js

@@ -8,13 +8,12 @@ import { useParams, useRequest } from '@umijs/max';
 import { Table } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect } from 'react';
+import { PageType } from '.';
 const SparePartDetail = () => {
   const { projectId, type } = useParams();
   const titles = ['入库详情', '出库详情', '报废详情', '库存详情'];
 
-  console.log(type);
-
-  const parmas = {
+  const params = {
     type: Number(type),
     project_id: Number(projectId),
     check_result: 0,
@@ -27,12 +26,11 @@ const SparePartDetail = () => {
     category_id: 0,
     name: '',
     warning_state: 0,
-    // type: 0,
     project_id: Number(projectId),
   };
 
   useEffect(() => {
-    type !== '3' ? run(parmas) : runExist(paramsExit);
+    type !== PageType.existing ? run(params) : runExist(paramsExit);
   }, [type]);
   const { data, run, loading } = useRequest((data) => queryStoreList(data), {
     manual: true,
@@ -274,7 +272,7 @@ const SparePartDetail = () => {
   return (
     <PageContent closeable={false}>
       <PageTitle children={titles[type]} returnable />
-      {type !== '3' ? (
+      {type !== PageType.existing ? (
         <Table
           loading={loading}
           style={{ marginTop: '10px' }}

src/pages/DeviceManager/index.js

@@ -9,7 +9,7 @@ import {
 import { UnityAction } from '@/utils/utils';
 import { RightOutlined } from '@ant-design/icons';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Collapse, List, Space, Table } from 'antd';
+import { Collapse, List, Space, Spin, Table } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useMemo, useState } from 'react';
 import styles from './index.less';
@@ -18,16 +18,19 @@ const deviceIcon = require('@/assets/deviceManager/deviceIcon.png');
 const spareIcon = require('@/assets/deviceManager/spareIcon.png');
 // const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 
+export const PageType = {
+  in: 0, //入库管理
+  out: 1, //出库管理
+  scrap: 2, //报废处置
+  existing: 3, //基础库存
+};
+
 const DeviceManager = () => {
   const { projectId } = useParams();
   const [defaultActiveKey, setDefaultActiveKey] = useState(
     localStorage.deviceTab || '1',
   );
 
-  const onChange = (tab) => {
-    setDefaultActiveKey(tab);
-  };
-
   useEffect(() => {
     // 重置默认显示tab
     localStorage.deviceTab = '1';
@@ -36,7 +39,7 @@ const DeviceManager = () => {
     <PageContent tabs>
       <TabsContent
         defaultActiveKey={defaultActiveKey}
-        onChange={onChange}
+        onChange={setDefaultActiveKey}
         items={[
           {
             label: `设备管理`,
@@ -187,7 +190,6 @@ const Device = ({ projectId }) => {
   } = useRequest(
     () =>
       queryRepairRecord({
-        // acceptanceStatus: 0,
         pageSize: 9999,
         recordId: Number(projectId),
       }),
@@ -218,30 +220,6 @@ const Device = ({ projectId }) => {
     setActiveCode(code);
   };
 
-  const renderChildlen = (item) => {
-    console.log(activeCode);
-    return (
-      <div style={{ position: 'relative' }}>
-        <List
-          header={null}
-          footer={null}
-          dataSource={item.List}
-          renderItem={(cur) => (
-            <List.Item
-              className={`${styles.listText} ${
-                activeCode == cur.Code ? styles.lineTextActive : ''
-              }`}
-              onClick={() => handleItemClick(cur.Code)}
-            >
-              <span style={{ marginRight: '166px' }}> {cur.Code} </span>
-              <span> {cur.Name} </span>
-            </List.Item>
-          )}
-        />
-      </div>
-    );
-  };
-
   const handleBtnClick = (type) => {
     setType(type);
     switch (type) {
@@ -257,39 +235,38 @@ const Device = ({ projectId }) => {
     }
   };
 
-  const onChange = () => {};
   return (
     <div className={styles.sparePart}>
-      <div className={`card-box ${styles.titleContent}`}>
-        <img className={styles.img} src={deviceIcon} />
-        <div>
-          <div className={styles.num}>{allData?.total}</div>
-          <div className={styles.text}>设备总数（个）</div>
-        </div>
-      </div>
-      <Space className={styles.btns} size={28}>
-        <div
-          className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
-          onClick={() => handleBtnClick(0)}
-        >
-          <span style={{ lineHeight: '60px' }}>全部</span>
-        </div>
-        <div
-          className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
-          onClick={() => handleBtnClick(1)}
-        >
-          <span style={{ lineHeight: '60px' }}>维修</span>
-        </div>
-        <div
-          className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
-          onClick={() => handleBtnClick(2)}
-        >
-          <span style={{ lineHeight: '60px' }}>保养</span>
+      <Spin spinning={loadingDevice}>
+        <div className={`card-box ${styles.titleContent}`}>
+          <img className={styles.img} src={deviceIcon} />
+          <div>
+            <div className={styles.num}>{allData?.total}</div>
+            <div className={styles.text}>设备总数（个）</div>
+          </div>
         </div>
-      </Space>
-      {type == 0 && (
-        <Collapse bordered={false} onChange={onChange} items={allData?.items} />
-      )}
+        <Space className={styles.btns} size={28}>
+          <div
+            className={`${styles.btn} ${type == 0 ? styles.active : ''}`}
+            onClick={() => handleBtnClick(0)}
+          >
+            <span style={{ lineHeight: '60px' }}>全部</span>
+          </div>
+          <div
+            className={`${styles.btn} ${type == 1 ? styles.active : ''}`}
+            onClick={() => handleBtnClick(1)}
+          >
+            <span style={{ lineHeight: '60px' }}>维修</span>
+          </div>
+          <div
+            className={`${styles.btn} ${type == 2 ? styles.active : ''}`}
+            onClick={() => handleBtnClick(2)}
+          >
+            <span style={{ lineHeight: '60px' }}>保养</span>
+          </div>
+        </Space>
+      </Spin>
+      {type == 0 && <Collapse bordered={false} items={allData?.items} />}
       {type == 1 && (
         <Table
           loading={repairLoading}
@@ -320,14 +297,7 @@ const SparePart = ({ projectId }) => {
     year: Number(year),
   };
   //请求备品列表
-  const { data } = useRequest(() => queryMainChartList(params));
-
-  const PageType = {
-    in: 0, //入库管理
-    out: 1, //出库管理
-    scrap: 2, //报废处置
-    existing: 3, //基础库存
-  };
+  const { data, loading } = useRequest(() => queryMainChartList(params));
 
   const changePage = (type) => {
     navigate(`/device/detail/${projectId}/${type}`);
@@ -335,7 +305,7 @@ const SparePart = ({ projectId }) => {
     localStorage.deviceTab = '2';
   };
 
-  const handletotalPage = () => {
+  const handleTotalPage = () => {
     navigate(`/device/storage/${projectId}`);
     // 设置默认显示tab为备品管理
     localStorage.deviceTab = '2';
@@ -367,33 +337,33 @@ const SparePart = ({ projectId }) => {
     return result;
   }, [data]);
   return (
-    <Space direction="vertical" size={16} className={styles.sparePart}>
-      <div className={`card-box ${styles.titleContent}`}>
-        <img className={styles.img} src={spareIcon} />
-        <div>
-          <div className={styles.num}>{data?.on_amount || 0}</div>
-          <div className={styles.text}>在库数量（个）</div>
-        </div>
-        {/* <img
-          className={styles.rightIcon}
-          src={chartIcon}
-          onClick={handletotalPage}
-        /> */}
-        <div onClick={handletotalPage} className={styles.iconFundFilled}></div>
-      </div>
-      {list.map((item) => (
-        <div
-          className={`card-box ${styles.cardItem}`}
-          onClick={() => changePage(item.type)}
-        >
-          <span className={styles.spareText}>{item.title}</span>
-          <Space size={30}>
-            <span className={styles.spareText}>{item.num}个</span>
-            <RightOutlined style={{ fontSize: '28px' }} />
-          </Space>
+    <Spin spinning={loading}>
+      <Space direction="vertical" size={16} className={styles.sparePart}>
+        <div className={`card-box ${styles.titleContent}`}>
+          <img className={styles.img} src={spareIcon} />
+          <div>
+            <div className={styles.num}>{data?.on_amount || 0}</div>
+            <div className={styles.text}>在库数量（个）</div>
+          </div>
+          <div
+            onClick={handleTotalPage}
+            className={styles.iconFundFilled}
+          ></div>
         </div>
-      ))}
-    </Space>
+        {list.map((item) => (
+          <div
+            className={`card-box ${styles.cardItem}`}
+            onClick={() => changePage(item.type)}
+          >
+            <span className={styles.spareText}>{item.title}</span>
+            <Space size={30}>
+              <span className={styles.spareText}>{item.num}个</span>
+              <RightOutlined style={{ fontSize: '28px' }} />
+            </Space>
+          </div>
+        ))}
+      </Space>
+    </Spin>
   );
 };
 

src/pages/DeviceManager/storage.js

@@ -6,11 +6,10 @@ 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 { Empty, Spin } from 'antd';
 import moment from 'moment';
 import { useRef } from 'react';
 import styles from './index.less';
-const { Option } = Select;
 
 const StorageOverview = () => {
   const { projectId } = useParams();
@@ -49,7 +48,6 @@ const StorageOverview = () => {
     {
       formatResult: (res) => {
         const data = res.data;
-        console.log('--------------------', data);
         const values =
           data?.scrap?.length > 0
             ? data?.scrap?.map((item) => item.value)
@@ -166,7 +164,7 @@ const StorageOverview = () => {
                           style={{
                             width: `${(70 * item.value) / data?.maxKind}%`,
                           }}
-                        ></div>
+                        />
                         {item.value}
                       </li>
                     );

src/pages/MessageCenter/index.js

@@ -3,7 +3,7 @@ import TabsContent from '@/components/TabsContent';
 import { getNotificationList } from '@/services/message';
 import { UnityAction } from '@/utils/utils';
 import { useParams, useRequest } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, Spin } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import styles from './index.less';
@@ -68,12 +68,20 @@ const MessageCenter = () => {
           {
             label: `水厂工况`,
             key: '1',
-            children: data?.list?.map((item) => renderItem(item)),
+            children: (
+              <Spin spinning={loading}>
+                {data?.list?.map((item) => renderItem(item))}
+              </Spin>
+            ),
           },
           {
             label: `系统自检`,
             key: '2',
-            children: data?.list?.map((item) => renderItem(item)),
+            children: (
+              <Spin spinning={loading}>
+                {data?.list?.map((item) => renderItem(item))}
+              </Spin>
+            ),
           },
         ]}
       />

src/pages/SafetyManagement/doorDetail.js

@@ -4,9 +4,9 @@ import { queryGateOpList } from '@/services/safety';
 import { useParams, useRequest } from '@umijs/max';
 import { Table } from 'antd';
 const DoorDetail = () => {
-  const { projectId, type } = useParams();
+  const { projectId } = useParams();
 
-  const { data, loading, run } = useRequest(queryGateOpList, {
+  const { data, loading } = useRequest(queryGateOpList, {
     defaultParams: [{ project_id: projectId }],
   });
   const columns = [
@@ -15,21 +15,21 @@ const DoorDetail = () => {
       dataIndex: 'created_time',
       key: 'created_time',
       align: 'center',
-      width: 160
+      width: 160,
     },
     {
       title: '人员',
       dataIndex: 'user_name',
       key: 'user_name',
       align: 'center',
-      width: 110
+      width: 110,
     },
     {
       title: '门禁名称',
       dataIndex: 'gate_name',
       key: 'gate_name',
       align: 'center',
-      width: 140
+      width: 140,
     },
     {
       title: '事件',
@@ -42,14 +42,14 @@ const DoorDetail = () => {
       dataIndex: 'check_type',
       key: 'check_type',
       align: 'center',
-      width: 140
+      width: 140,
     },
     {
       title: '出入状态',
       dataIndex: 'status',
       key: 'status',
       align: 'center',
-      width: 140
+      width: 140,
     },
   ];
 

src/pages/SafetyManagement/index.js

@@ -8,12 +8,11 @@ import {
 } from '@/services/safety';
 import { UnityAction } from '@/utils/utils';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, Space } from 'antd';
+import { Button, Space, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 const doorIcon = require('@/assets/deviceManager/doorIcon.png');
 const videoIcon = require('@/assets/air-conditioner.png');
-const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
   const [tab, setTab] = useState(localStorage.safeTab || '1');
@@ -25,6 +24,8 @@ const DeviceManager = () => {
       manual: true,
     },
   );
+
+  //视频接口
   const {
     data: dataOver,
     run: runOver,
@@ -63,12 +64,12 @@ const DeviceManager = () => {
     }
   };
   useEffect(() => {
-    localStorage.safeTab = '1'
-    if(tab == '2') {
+    localStorage.safeTab = '1';
+    if (tab == '2') {
       run();
       runOver();
     }
-  },[])
+  }, []);
   return (
     <PageContent tabs>
       <TabsContent
@@ -94,7 +95,7 @@ const DeviceManager = () => {
               <Door
                 data={data?.list}
                 dataOver={dataOver}
-                loading={loading}
+                loading={loading || loadingOver}
                 projectId={projectId}
               />
             ),
@@ -104,7 +105,7 @@ const DeviceManager = () => {
     </PageContent>
   );
 };
-const Video = ({ projectId, data, dataOnline, loading }) => {
+const Video = ({ data, dataOnline, loading }) => {
   const renderRed = (item) => {
     return (
       <div className={styles.cardItem}>
@@ -116,42 +117,46 @@ const Video = ({ projectId, data, dataOnline, loading }) => {
     );
   };
   return (
-    <Space direction="vertical" size={16} className={styles.sparePart}>
-      <div className={`card-box ${styles.titleContent}`}>
-        <div className={styles.titleLeft}>
-          <img className={styles.img} src={videoIcon} />
-          <div className={styles.textCon}>
-            <div className={styles.num}>{dataOnline?.total || 0}</div>
-            <div className={styles.text}>在库数量（个）</div>
-          </div>
-        </div>
-        <div>
-          <div className={styles.lTextCon1}>
-            <div className={styles.onlinePoint} />
-            <span className={styles.text}>在线：{dataOnline?.online || 0}</span>
+    <Spin spinning={loading}>
+      <Space direction="vertical" size={16} className={styles.sparePart}>
+        <div className={`card-box ${styles.titleContent}`}>
+          <div className={styles.titleLeft}>
+            <img className={styles.img} src={videoIcon} />
+            <div className={styles.textCon}>
+              <div className={styles.num}>{dataOnline?.total || 0}</div>
+              <div className={styles.text}>在库数量（个）</div>
+            </div>
           </div>
-          <div className={styles.lTextCon2}>
-            <div className={styles.outlinePoint} />
-            <span className={styles.text}>
-              离线：{dataOnline?.offline || 0}
-            </span>
+          <div>
+            <div className={styles.lTextCon1}>
+              <div className={styles.onlinePoint} />
+              <span className={styles.text}>
+                在线：{dataOnline?.online || 0}
+              </span>
+            </div>
+            <div className={styles.lTextCon2}>
+              <div className={styles.outlinePoint} />
+              <span className={styles.text}>
+                离线：{dataOnline?.offline || 0}
+              </span>
+            </div>
           </div>
         </div>
-      </div>
 
-      {data?.map((item, idx) => (
-        <div key={`video_${idx}`} className="card-box">
-          {renderRed(item)}
-        </div>
-      ))}
-    </Space>
+        {data?.map((item, idx) => (
+          <div key={`video_${idx}`} className="card-box">
+            {renderRed(item)}
+          </div>
+        ))}
+      </Space>
+    </Spin>
   );
 };
 const Door = ({ data, dataOver, loading, projectId }) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
-    localStorage.safeTab = '2'
+    localStorage.safeTab = '2';
     navigate(`/safety/detail/${projectId}`);
   };
 
@@ -166,47 +171,49 @@ const Door = ({ data, dataOver, loading, projectId }) => {
     );
   };
   return (
-    <Space direction="vertical" size={16} className={styles.doorPart}>
-      <div className={styles.titleContent}>
-        <div className={`card-box ${styles.cardLeft}`}>
-          <div className={styles.up}>
-            <img className={styles.img} src={doorIcon} />
-            <div className={styles.textCon}>
-              <div className={styles.num}>{dataOver?.total}</div>
-              <div className={styles.text}>门禁数量（个）</div>
+    <Spin spinning={loading}>
+      <Space direction="vertical" size={16} className={styles.doorPart}>
+        <div className={styles.titleContent}>
+          <div className={`card-box ${styles.cardLeft}`}>
+            <div className={styles.up}>
+              <img className={styles.img} src={doorIcon} />
+              <div className={styles.textCon}>
+                <div className={styles.num}>{dataOver?.total}</div>
+                <div className={styles.text}>门禁数量（个）</div>
+              </div>
+            </div>
+            <div className={styles.bottom}>
+              <div className={styles.lTextCon2}>
+                <div className={styles.onlinePoint} />
+                <span className={styles.text}>在线：{dataOver?.online}</span>
+              </div>
+              <div className={styles.lTextCon2}>
+                <div className={styles.outlinePoint} />
+                <span className={styles.text}>离线：{dataOver?.offline}</span>
+              </div>
             </div>
           </div>
-          <div className={styles.bottom}>
-            <div className={styles.lTextCon2}>
-              <div className={styles.onlinePoint} />
-              <span className={styles.text}>在线：{dataOver?.online}</span>
+          <div className={`card-box ${styles.cardRight}`}>
+            <div className={styles.textContent}>
+              <div className={styles.in} />
+              <span className={styles.text}>今日进厂人数：{2}</span>
             </div>
-            <div className={styles.lTextCon2}>
-              <div className={styles.outlinePoint} />
-              <span className={styles.text}>离线：{dataOver?.offline}</span>
+            <div className={styles.textContent}>
+              <div className={styles.out} />
+              <span className={styles.text}>今日出厂人数：{2}</span>
             </div>
+            <Button className={styles.btn} onClick={handleClick}>
+              门禁日志
+            </Button>
           </div>
         </div>
-        <div className={`card-box ${styles.cardRight}`}>
-          <div className={styles.textContent}>
-            <div className={styles.in} />
-            <span className={styles.text}>今日进厂人数：{2}</span>
-          </div>
-          <div className={styles.textContent}>
-            <div className={styles.out} />
-            <span className={styles.text}>今日出厂人数：{2}</span>
+        {data?.map((item, idx) => (
+          <div key={`door_${idx}`} className="card-box">
+            {renderRed(item)}
           </div>
-          <Button className={styles.btn} onClick={handleClick}>
-            门禁日志
-          </Button>
-        </div>
-      </div>
-      {data?.map((item, idx) => (
-        <div key={`door_${idx}`} className="card-box">
-          {renderRed(item)}
-        </div>
-      ))}
-    </Space>
+        ))}
+      </Space>
+    </Spin>
   );
 };