asder

config/authRoutes.js

@@ -18,6 +18,12 @@ export default [
         component: './home',
         icon: 'HomeOutlined',
       },
+      {
+        name: '设备详情',
+        path: '/home/detail',
+        component: './home/detail',
+        icon: 'HomeOutlined',
+      },
     ],
   },
 

src/components/AutoTable/index.jsx

@@ -40,7 +40,7 @@ export default (props) => {
     children,
   } = props;
 
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
   const [hasMore, setHasMore] = useState(true);
   const [pageinfo, setpageinfo] = useState({
     pageIndex: 1,
@@ -60,7 +60,7 @@ export default (props) => {
     });
     const page = append?.data?.page;
     const dataes = page?.records ?? append?.data?.dataList ?? [];
-    setData((val) => [...val, ...dataes]);
+    setData((val) => [...(val ?? []), ...dataes]);
     return page
       ? {
           ...page,
@@ -83,7 +83,7 @@ export default (props) => {
       ...s,
       pageIndex: 1,
     }));
-    await setData([]);
+    await setData(null);
   }
 
   //额外参数改变后重置
@@ -128,13 +128,15 @@ export default (props) => {
           <div></div>
         </div>
       </div>
-      {data.length > 0 ? (
+      {data?.length > 0 ? (
         <PullToRefresh
           onRefresh={async () => {
             await reFresh();
           }}
         >
-          {data.map((item, index) => cloneElement(children, { item, columns }))}
+          {data?.map((item, index) =>
+            cloneElement(children, { item, columns }),
+          )}
           <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
         </PullToRefresh>
       ) : (
@@ -144,11 +146,17 @@ export default (props) => {
           }}
         >
           <div style={{ minHeight: 'calc(100vh - 172px)' }}>
-            <Empty
-              style={{ padding: '64px 0' }}
-              imageStyle={{ width: '30vw' }}
-              description="暂无数据"
-            />
+            {data?.length === 0 ? (
+              <Empty
+                style={{ padding: '64px 0' }}
+                imageStyle={{ width: '120px' }}
+                description="暂无数据"
+              />
+            ) : (
+              <div className='center' style={{ fontSize: 16 }}>
+                <DotLoading />
+              </div>
+            )}
           </div>
         </PullToRefresh>
       )}

src/global.less

@@ -143,4 +143,7 @@ a:active{
   *{
     color: #fff !important;
   }
+}
+.adm-floating-panel{
+  z-index: 9999999;
 }
\ No newline at end of file

src/layouts/BasicLayout.jsx

@@ -54,6 +54,7 @@ function BasicLayout() {
       icon: <PieChartFilled />,
     },
   ];
+
   const location = useLocation();
   const { pathname } = location;
 
@@ -83,7 +84,7 @@ function BasicLayout() {
     if (distancey > 10 || distancey < -10) {
       return;
     }
-    if (distance > 20) {
+    if (distance > 20 && menulist.includes(pathname)) {
       // 执行左滑操作
       setdrawer((s) => ({
         ...s,
@@ -91,7 +92,8 @@ function BasicLayout() {
       }));
     }
   }
-  const handler = useRef(),formRef = useRef();
+  const handler = useRef(),
+    formRef = useRef();
   const [visible1, setVisible1] = useState(false);
   const [type, settype] = useState({});
 
@@ -118,7 +120,7 @@ function BasicLayout() {
             onMaskClick={() => {
               setVisible1(false);
             }}
-            bodyStyle={{ height: type?.val === 'info' ?'330px':'430px' }}
+            bodyStyle={{ height: type?.val === 'info' ? '330px' : '430px' }}
             position="top"
           >
             {type?.val === 'info' ? (
@@ -159,54 +161,59 @@ function BasicLayout() {
                   formRef={formRef}
                   fields={[
                     {
-                      "title": "原始密码",
-                      "dataIndex": "oldPassword",
-                      "key": "oldPassword",
-                      "formItemProps": {
-                        "rules": [
+                      title: '原始密码',
+                      dataIndex: 'oldPassword',
+                      key: 'oldPassword',
+                      formItemProps: {
+                        rules: [
                           {
-                            "required": true,
-                            "message": "此项为必填项"
-                          }
-                        ]
-                      }
+                            required: true,
+                            message: '此项为必填项',
+                          },
+                        ],
+                      },
                     },
                     {
-                      "title": "新密码",
-                      "dataIndex": "password",
-                      "key": "password",
-                      "formItemProps": {
-                        "rules": [
+                      title: '新密码',
+                      dataIndex: 'password',
+                      key: 'password',
+                      formItemProps: {
+                        rules: [
                           {
-                            "required": true,
-                            "message": "此项为必填项"
-                          }
-                        ]
+                            required: true,
+                            message: '此项为必填项',
+                          },
+                        ],
                       },
-                      "valueType": "password"
+                      valueType: 'password',
                     },
                     {
-                      "title": "确认新密码",
-                      "dataIndex": "confirmPassword",
-                      "key": "confirmPassword",
-                      "formItemProps": {
-                        "rules": [
+                      title: '确认新密码',
+                      dataIndex: 'confirmPassword',
+                      key: 'confirmPassword',
+                      formItemProps: {
+                        rules: [
                           {
-                            "required": true,
-                            "message": "此项为必填项"
+                            required: true,
+                            message: '此项为必填项',
                           },
                           ({ getFieldValue }) => ({
                             validator(_, value) {
-                              if (!value || getFieldValue('password') === value) {
+                              if (
+                                !value ||
+                                getFieldValue('password') === value
+                              ) {
                                 return Promise.resolve();
                               }
-                              return Promise.reject(new Error('两次输入的密码不一致!'));
+                              return Promise.reject(
+                                new Error('两次输入的密码不一致!'),
+                              );
                             },
                           }),
-                        ]
+                        ],
                       },
-                      "valueType": "password"
-                    }
+                      valueType: 'password',
+                    },
                   ]}
                   onFinish={async (vals) => {
                     let res = await doFetch({
@@ -222,8 +229,6 @@ function BasicLayout() {
               </div>
             )}
           </Popup>
-          
-
 
           <Avatar size={56} icon={<UserOutlined />}></Avatar>
           <div
@@ -264,8 +269,17 @@ function BasicLayout() {
             >
               公司
             </List.Item>
-            <div style={{alignItems:"flex-end",paddingLeft:8}} className="center">
-              <Divider style={{minWidth:120,width:"calc(100% - 0px)",marginBottom:16}}></Divider>
+            <div
+              style={{ alignItems: 'flex-end', paddingLeft: 8 }}
+              className="center"
+            >
+              <Divider
+                style={{
+                  minWidth: 120,
+                  width: 'calc(100% - 0px)',
+                  marginBottom: 16,
+                }}
+              ></Divider>
             </div>
             <List.Item
               prefix={<LockOutlined />}
@@ -320,7 +334,7 @@ function BasicLayout() {
           </Button>
         </div>
       </Drawer>
-      <div className="top">
+      <div className="top" style={{zIndex:menulist.includes(pathname)?999:99999999}}>
         <NavBar
           backArrow={
             menulist.includes(pathname) ? (
@@ -343,22 +357,24 @@ function BasicLayout() {
           {currouter?.name}
         </NavBar>
       </div>
-      <div style={{ height: 94 }}></div>
+      <div style={{ height: menulist.includes(pathname) ? 94 : 58 }}></div>
       <div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
         <Outlet></Outlet>
       </div>
 
       <div style={{ height: 66 }}></div>
-      <div className="bottom">
-        <TabBar
-          activeKey={pathname}
-          onChange={(value) => setRouteActive(value)}
-        >
-          {tabs.map((item) => (
-            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
-          ))}
-        </TabBar>
-      </div>
+      {menulist.includes(pathname) && (
+        <div className="bottom">
+          <TabBar
+            activeKey={pathname}
+            onChange={(value) => setRouteActive(value)}
+          >
+            {tabs.map((item) => (
+              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+            ))}
+          </TabBar>
+        </div>
+      )}
     </div>
   );
 }

src/pages/home/index.jsx

@@ -3,12 +3,13 @@ import * as React from 'react';
 import { useState, useMemo, useRef } from 'react';
 import DrawerPro from '@/components/DrawerPro';
 import AutoTable from '@/components/AutoTable';
-import { Badge } from 'antd';
+import { Badge,Skeleton } from 'antd';
 import getcolumns from './columns';
 import { useAsyncEffect, useRequest } from 'ahooks';
 import { doFetch } from '@/utils/doFetch';
 import ReactECharts from 'echarts-for-react';
 import Settings from '../../../config/defaultSettings';
+import { history } from '@umijs/max';
 
 const { proxypath } = Settings;
 
@@ -51,7 +52,9 @@ function cropImage(url) {
 const Cards = ({ item, columns }) => {
   const [option, setoption] = useState({});
   const { statusColorList, deviceStatusDurationList } = item;
+  const [loading, setloading] = useState(false);
   useAsyncEffect(async () => {
+    setloading(true) 
     let img =
       item?.image?.length > 0
         ? proxypath + item.image?.[0]?.url
@@ -80,7 +83,6 @@ const Cards = ({ item, columns }) => {
         },
       },
     ];
-
     const options = {
       series: [
         {
@@ -109,24 +111,28 @@ const Cards = ({ item, columns }) => {
         ],
       },
     };
-
-    setoption(options);
+    await setoption(options);
+    setloading(false) 
   }, [item]);
 
   return (
-    <div className="split">
+    <div
+      className="split"
+      onClick={() => {
+        history.push('/home/detail', {
+          id: item.id,
+          deviceId: item.deviceId
+        });
+      }}
+      style={{minHeight:169}}
+    >
+      <Skeleton loading={loading} active>
       <div className="spread" style={{ justifyContent: 'flex-start' }}>
         <Badge
           count={item.alarmNum}
           overflowCount={99}
           offset={[-10, 10]}
-          color={
-            item.alarmNum < 10
-              ? '#108ee9'
-              : item.alarmNum < 30
-              ? '#f76e1e'
-              : 'red'
-          }
+          color="red"
         >
           <div style={{ width: 120, height: 120, flexShrink: 0 }}>
             <ReactECharts option={option} style={{ height: '100%' }} />
@@ -156,40 +162,29 @@ const Cards = ({ item, columns }) => {
             })}
         </div>
       </div>
+      </Skeleton>
+  
     </div>
   );
 };
 
 function Home(props) {
-  const actionRef = useRef(),
-    formRef = useRef();
-  const [drawer, setdrawer] = useState({
-      open: false,
-    }),
-    [activeTabKey, setactiveTabKey] = useState('1');
+  const actionRef = useRef();
 
   const { run, loading } = useRequest(doFetch, {
     manual: true,
     onSuccess: (res, params) => {
       if (res?.code === '0000') {
         actionRef?.current?.reload();
-        setdrawer((s) => ({
-          ...s,
-          open: false,
-        }));
       }
     },
   });
 
   const columns = useMemo(() => {
-    let defcolumn = getcolumns(setdrawer)?.columns;
+    let defcolumn = getcolumns()?.columns;
     return defcolumn;
-  }, [activeTabKey]);
+  }, []);
 
-  const pathconfig = useMemo(() => {
-    let defpath = getcolumns()?.pathconfig ?? {};
-    return defpath;
-  }, [activeTabKey]);
 
   return (
     <div style={{ position: 'relative' }}>
@@ -200,33 +195,6 @@ function Home(props) {
       >
         <Cards />
       </AutoTable>
-
-      <DrawerPro
-        fields={columns}
-        detailpath={pathconfig?.detail || null}
-        detailData={drawer?.item}
-        defaultFormValue={drawer?.item}
-        params={{ id: drawer?.item?.id }}
-        formRef={formRef}
-        placement="right"
-        onClose={() => {
-          setdrawer((s) => ({
-            ...s,
-            open: false,
-          }));
-        }}
-        {...drawer}
-        onFinish={(vals) => {
-          if (drawer?.val === 'add') {
-            run({ url: pathconfig?.add || '/add', params: { ...vals } });
-          } else if (drawer?.val === 'edit') {
-            run({
-              url: pathconfig?.edit || '/edit',
-              params: { ...vals, id: drawer?.item?.id },
-            });
-          }
-        }}
-      />
     </div>
   );
 }