mobile finished

src/components/AutoTable/index.jsx

@@ -58,9 +58,15 @@ export default (props) => {
         ...searchparams,
       },
     });
-    const dataes = append?.data?.page?.records ?? append?.data?.dataList ?? [];
+    const page = append?.data?.page;
+    const dataes = page?.records ?? append?.data?.dataList ?? [];
     setData((val) => [...val, ...dataes]);
-    return append?.data?.page ?? { hasNextPage: false };
+    return page
+      ? {
+          ...page,
+          hasNextPage: page.size > page.current,
+        }
+      : { hasNextPage: false };
   }
   //加载更多数据
   async function loadMore() {

src/components/AutoTable/index.less

@@ -3,9 +3,10 @@
 .header {
   display: flex;
   align-items: center;
-  position: sticky;
+  position: fixed;
+  width: 100%;
   z-index: 122;
-  top: 45px;
+  top: 40px;
   left: 0;
   > div {
     width: 100%;

src/global.less

@@ -86,7 +86,9 @@ a {
   padding: 6px 0;
   margin: 0px 12px;
   border-top: 1px dashed #f0f0f01d;
-  border-bottom: 1px dashed #f0f0f01a;
+}
+.split:first-child{
+  border-top: none !important;
 }
 .ant-drawer-content {
   background: linear-gradient(to bottom, #142f4d, #657b90) !important;
@@ -118,8 +120,27 @@ a:active{
   justify-content: space-between;
   flex-direction: column;
   padding-left: 12px;
+  overflow: hidden;
   h2,h3,p{
     margin: 0;
     margin-bottom: 0;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    font-weight: bolder;
+  }
+  h3,p{
+    font-size: 14px;
+  }
+  p{
+    font-weight: normal;
+  }
+}
+.ant-badge-count{
+  box-shadow: none !important;
+  *{
+    color: #fff !important;
   }
 }
\ No newline at end of file

src/layouts/BasicLayout.jsx

@@ -343,7 +343,7 @@ function BasicLayout() {
           {currouter?.name}
         </NavBar>
       </div>
-      <div style={{ height: 45 }}></div>
+      <div style={{ height: 94 }}></div>
       <div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
         <Outlet></Outlet>
       </div>

src/pages/home/columns.js

@@ -5,11 +5,19 @@ function getcolumns(setdrawer) {
         title: '设备名称',
         dataIndex: 'deviceName',
         key: 'deviceName',
+        hidetitle:true,
+
       },
       {
         title: '设备状态',
         dataIndex: 'deviceStatusName',
         key: 'deviceStatusName',
+        hidetitle:true,
+        render: (text,record)=>{
+          return <div style={{color:record?.statusColorList?.filter(it=>it.type === record.deviceStatus)[0].color}}>
+            {text}
+          </div>
+        }
       },
       {
         title: '活跃时间',

src/pages/home/index.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useState, useMemo, useRef } from 'react';
 import DrawerPro from '@/components/DrawerPro';
 import AutoTable from '@/components/AutoTable';
-import PremButton from '@/components/PremButton';
+import { Badge } from 'antd';
 import getcolumns from './columns';
 import { useAsyncEffect, useRequest } from 'ahooks';
 import { doFetch } from '@/utils/doFetch';
@@ -116,9 +116,22 @@ const Cards = ({ item, columns }) => {
   return (
     <div className="split">
       <div className="spread" style={{ justifyContent: 'flex-start' }}>
-        <div style={{ width: 120, height: 120, flexShrink: 0 }}>
-          <ReactECharts option={option} style={{ height: '100%' }} />
-        </div>
+        <Badge
+          count={item.alarmNum}
+          overflowCount={99}
+          offset={[-10, 10]}
+          color={
+            item.alarmNum < 10
+              ? '#108ee9'
+              : item.alarmNum < 30
+              ? '#f76e1e'
+              : 'red'
+          }
+        >
+          <div style={{ width: 120, height: 120, flexShrink: 0 }}>
+            <ReactECharts option={option} style={{ height: '100%' }} />
+          </div>
+        </Badge>
 
         <div style={{ flex: 1 }} className="rightsection">
           {columns
@@ -134,8 +147,10 @@ const Cards = ({ item, columns }) => {
                 );
               return (
                 <Bod key={it?.dataIndex}>
-                  {it?.title}
-                  {item[it?.dataIndex]}
+                  {it?.hidetitle ? '' : `${it?.title}: `}
+                  {it.render
+                    ? it.render(item[it?.dataIndex], item)
+                    : item[it?.dataIndex]}
                 </Bod>
               );
             })}