Skip to content

I
Iot_mobile
Commit 1ac6b91f authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent 8b44ded0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 774 additions and 116 deletions
config/authRoutes.js
View file @ 1ac6b91f
...@@ -18,6 +18,12 @@ export default [ ...@@ -18,6 +18,12 @@ export default [
component: './home', component: './home',
icon: 'HomeOutlined', icon: 'HomeOutlined',
}, },
{
name: '设备详情',
path: '/home/detail',
component: './home/detail',
icon: 'HomeOutlined',
},
], ],
}, },
......
src/components/AutoTable/index.jsx
View file @ 1ac6b91f
...@@ -40,7 +40,7 @@ export default (props) => { ...@@ -40,7 +40,7 @@ export default (props) => {
children, children,
} = props; } = props;
const [data, setData] = useState([]); const [data, setData] = useState();
const [hasMore, setHasMore] = useState(true); const [hasMore, setHasMore] = useState(true);
const [pageinfo, setpageinfo] = useState({ const [pageinfo, setpageinfo] = useState({
pageIndex: 1, pageIndex: 1,
...@@ -60,7 +60,7 @@ export default (props) => { ...@@ -60,7 +60,7 @@ export default (props) => {
}); });
const page = append?.data?.page; const page = append?.data?.page;
const dataes = page?.records ?? append?.data?.dataList ?? []; const dataes = page?.records ?? append?.data?.dataList ?? [];
setData((val) => [...val, ...dataes]); setData((val) => [...(val ?? []), ...dataes]);
return page return page
? { ? {
...page, ...page,
...@@ -83,7 +83,7 @@ export default (props) => { ...@@ -83,7 +83,7 @@ export default (props) => {
...s, ...s,
pageIndex: 1, pageIndex: 1,
})); }));
await setData([]); await setData(null);
} }
//额外参数改变后重置 //额外参数改变后重置
...@@ -128,13 +128,15 @@ export default (props) => { ...@@ -128,13 +128,15 @@ export default (props) => {
<div></div> <div></div>
</div> </div>
</div> </div>
{data.length > 0 ? ( {data?.length > 0 ? (
<PullToRefresh <PullToRefresh
onRefresh={async () => { onRefresh={async () => {
await reFresh(); await reFresh();
}} }}
> >
{data.map((item, index) => cloneElement(children, { item, columns }))} {data?.map((item, index) =>
cloneElement(children, { item, columns }),
)}
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
</PullToRefresh> </PullToRefresh>
) : ( ) : (
...@@ -144,11 +146,17 @@ export default (props) => { ...@@ -144,11 +146,17 @@ export default (props) => {
}} }}
> >
<div style={{ minHeight: 'calc(100vh - 172px)' }}> <div style={{ minHeight: 'calc(100vh - 172px)' }}>
<Empty {data?.length === 0 ? (
style={{ padding: '64px 0' }} <Empty
imageStyle={{ width: '30vw' }} style={{ padding: '64px 0' }}
description="暂无数据" imageStyle={{ width: '120px' }}
/> description="暂无数据"
/>
) : (
<div className='center' style={{ fontSize: 16 }}>
<DotLoading />
</div>
)}
</div> </div>
</PullToRefresh> </PullToRefresh>
)} )}
......
src/global.less
View file @ 1ac6b91f
...@@ -143,4 +143,7 @@ a:active{ ...@@ -143,4 +143,7 @@ a:active{
*{ *{
color: #fff !important; color: #fff !important;
} }
}
.adm-floating-panel{
z-index: 9999999;
} }
\ No newline at end of file
src/layouts/BasicLayout.jsx
View file @ 1ac6b91f
...@@ -54,6 +54,7 @@ function BasicLayout() { ...@@ -54,6 +54,7 @@ function BasicLayout() {
icon: <PieChartFilled />, icon: <PieChartFilled />,
}, },
]; ];
const location = useLocation(); const location = useLocation();
const { pathname } = location; const { pathname } = location;
...@@ -83,7 +84,7 @@ function BasicLayout() { ...@@ -83,7 +84,7 @@ function BasicLayout() {
if (distancey > 10 || distancey < -10) { if (distancey > 10 || distancey < -10) {
return; return;
} }
if (distance > 20) { if (distance > 20 && menulist.includes(pathname)) {
// 执行左滑操作 // 执行左滑操作
setdrawer((s) => ({ setdrawer((s) => ({
...s, ...s,
...@@ -91,7 +92,8 @@ function BasicLayout() { ...@@ -91,7 +92,8 @@ function BasicLayout() {
})); }));
} }
} }
const handler = useRef(),formRef = useRef(); const handler = useRef(),
formRef = useRef();
const [visible1, setVisible1] = useState(false); const [visible1, setVisible1] = useState(false);
const [type, settype] = useState({}); const [type, settype] = useState({});
...@@ -118,7 +120,7 @@ function BasicLayout() { ...@@ -118,7 +120,7 @@ function BasicLayout() {
onMaskClick={() => { onMaskClick={() => {
setVisible1(false); setVisible1(false);
}} }}
bodyStyle={{ height: type?.val === 'info' ?'330px':'430px' }} bodyStyle={{ height: type?.val === 'info' ? '330px' : '430px' }}
position="top" position="top"
> >
{type?.val === 'info' ? ( {type?.val === 'info' ? (
...@@ -159,54 +161,59 @@ function BasicLayout() { ...@@ -159,54 +161,59 @@ function BasicLayout() {
formRef={formRef} formRef={formRef}
fields={[ fields={[
{ {
"title": "原始密码", title: '原始密码',
"dataIndex": "oldPassword", dataIndex: 'oldPassword',
"key": "oldPassword", key: 'oldPassword',
"formItemProps": { formItemProps: {
"rules": [ rules: [
{ {
"required": true, required: true,
"message": "此项为必填项" message: '此项为必填项',
} },
] ],
} },
}, },
{ {
"title": "新密码", title: '新密码',
"dataIndex": "password", dataIndex: 'password',
"key": "password", key: 'password',
"formItemProps": { formItemProps: {
"rules": [ rules: [
{ {
"required": true, required: true,
"message": "此项为必填项" message: '此项为必填项',
} },
] ],
}, },
"valueType": "password" valueType: 'password',
}, },
{ {
"title": "确认新密码", title: '确认新密码',
"dataIndex": "confirmPassword", dataIndex: 'confirmPassword',
"key": "confirmPassword", key: 'confirmPassword',
"formItemProps": { formItemProps: {
"rules": [ rules: [
{ {
"required": true, required: true,
"message": "此项为必填项" message: '此项为必填项',
}, },
({ getFieldValue }) => ({ ({ getFieldValue }) => ({
validator(_, value) { validator(_, value) {
if (!value || getFieldValue('password') === value) { if (
!value ||
getFieldValue('password') === value
) {
return Promise.resolve(); return Promise.resolve();
} }
return Promise.reject(new Error('两次输入的密码不一致!')); return Promise.reject(
new Error('两次输入的密码不一致!'),
);
}, },
}), }),
] ],
}, },
"valueType": "password" valueType: 'password',
} },
]} ]}
onFinish={async (vals) => { onFinish={async (vals) => {
let res = await doFetch({ let res = await doFetch({
...@@ -222,8 +229,6 @@ function BasicLayout() { ...@@ -222,8 +229,6 @@ function BasicLayout() {
</div> </div>
)} )}
</Popup> </Popup>
<Avatar size={56} icon={<UserOutlined />}></Avatar> <Avatar size={56} icon={<UserOutlined />}></Avatar>
<div <div
...@@ -264,8 +269,17 @@ function BasicLayout() { ...@@ -264,8 +269,17 @@ function BasicLayout() {
> >
公司 公司
</List.Item> </List.Item>
<div style={{alignItems:"flex-end",paddingLeft:8}} className="center"> <div
<Divider style={{minWidth:120,width:"calc(100% - 0px)",marginBottom:16}}></Divider> style={{ alignItems: 'flex-end', paddingLeft: 8 }}
className="center"
>
<Divider
style={{
minWidth: 120,
width: 'calc(100% - 0px)',
marginBottom: 16,
}}
></Divider>
</div> </div>
<List.Item <List.Item
prefix={<LockOutlined />} prefix={<LockOutlined />}
...@@ -320,7 +334,7 @@ function BasicLayout() { ...@@ -320,7 +334,7 @@ function BasicLayout() {
</Button> </Button>
</div> </div>
</Drawer> </Drawer>
<div className="top"> <div className="top" style={{zIndex:menulist.includes(pathname)?999:99999999}}>
<NavBar <NavBar
backArrow={ backArrow={
menulist.includes(pathname) ? ( menulist.includes(pathname) ? (
...@@ -343,22 +357,24 @@ function BasicLayout() { ...@@ -343,22 +357,24 @@ function BasicLayout() {
{currouter?.name} {currouter?.name}
</NavBar> </NavBar>
</div> </div>
<div style={{ height: 94 }}></div> <div style={{ height: menulist.includes(pathname) ? 94 : 58 }}></div>
<div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}> <div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
<Outlet></Outlet> <Outlet></Outlet>
</div> </div>
<div style={{ height: 66 }}></div> <div style={{ height: 66 }}></div>
<div className="bottom"> {menulist.includes(pathname) && (
<TabBar <div className="bottom">
activeKey={pathname} <TabBar
onChange={(value) => setRouteActive(value)} activeKey={pathname}
> onChange={(value) => setRouteActive(value)}
{tabs.map((item) => ( >
<TabBar.Item key={item.key} icon={item.icon} title={item.title} /> {tabs.map((item) => (
))} <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
</TabBar> ))}
</div> </TabBar>
</div>
)}
</div> </div>
); );
} }
......
src/pages/home/detail.jsx 0 → 100644
View file @ 1ac6b91f
This diff is collapsed.
src/pages/home/index.jsx
View file @ 1ac6b91f
...@@ -3,12 +3,13 @@ import * as React from 'react'; ...@@ -3,12 +3,13 @@ import * as React from 'react';
import { useState, useMemo, useRef } from 'react'; import { useState, useMemo, useRef } from 'react';
import DrawerPro from '@/components/DrawerPro'; import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable'; import AutoTable from '@/components/AutoTable';
import { Badge } from 'antd'; import { Badge,Skeleton } from 'antd';
import getcolumns from './columns'; import getcolumns from './columns';
import { useAsyncEffect, useRequest } from 'ahooks'; import { useAsyncEffect, useRequest } from 'ahooks';
import { doFetch } from '@/utils/doFetch'; import { doFetch } from '@/utils/doFetch';
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import Settings from '../../../config/defaultSettings'; import Settings from '../../../config/defaultSettings';
import { history } from '@umijs/max';
const { proxypath } = Settings; const { proxypath } = Settings;
...@@ -51,7 +52,9 @@ function cropImage(url) { ...@@ -51,7 +52,9 @@ function cropImage(url) {
const Cards = ({ item, columns }) => { const Cards = ({ item, columns }) => {
const [option, setoption] = useState({}); const [option, setoption] = useState({});
const { statusColorList, deviceStatusDurationList } = item; const { statusColorList, deviceStatusDurationList } = item;
const [loading, setloading] = useState(false);
useAsyncEffect(async () => { useAsyncEffect(async () => {
setloading(true)
let img = let img =
item?.image?.length > 0 item?.image?.length > 0
? proxypath + item.image?.[0]?.url ? proxypath + item.image?.[0]?.url
...@@ -80,7 +83,6 @@ const Cards = ({ item, columns }) => { ...@@ -80,7 +83,6 @@ const Cards = ({ item, columns }) => {
}, },
}, },
]; ];
const options = { const options = {
series: [ series: [
{ {
...@@ -109,24 +111,28 @@ const Cards = ({ item, columns }) => { ...@@ -109,24 +111,28 @@ const Cards = ({ item, columns }) => {
], ],
}, },
}; };
await setoption(options);
setoption(options); setloading(false)
}, [item]); }, [item]);
return ( 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' }}> <div className="spread" style={{ justifyContent: 'flex-start' }}>
<Badge <Badge
count={item.alarmNum} count={item.alarmNum}
overflowCount={99} overflowCount={99}
offset={[-10, 10]} offset={[-10, 10]}
color={ color="red"
item.alarmNum < 10
? '#108ee9'
: item.alarmNum < 30
? '#f76e1e'
: 'red'
}
> >
<div style={{ width: 120, height: 120, flexShrink: 0 }}> <div style={{ width: 120, height: 120, flexShrink: 0 }}>
<ReactECharts option={option} style={{ height: '100%' }} /> <ReactECharts option={option} style={{ height: '100%' }} />
...@@ -156,40 +162,29 @@ const Cards = ({ item, columns }) => { ...@@ -156,40 +162,29 @@ const Cards = ({ item, columns }) => {
})} })}
</div> </div>
</div> </div>
</Skeleton>
</div> </div>
); );
}; };
function Home(props) { function Home(props) {
const actionRef = useRef(), const actionRef = useRef();
formRef = useRef();
const [drawer, setdrawer] = useState({
open: false,
}),
[activeTabKey, setactiveTabKey] = useState('1');
const { run, loading } = useRequest(doFetch, { const { run, loading } = useRequest(doFetch, {
manual: true, manual: true,
onSuccess: (res, params) => { onSuccess: (res, params) => {
if (res?.code === '0000') { if (res?.code === '0000') {
actionRef?.current?.reload(); actionRef?.current?.reload();
setdrawer((s) => ({
...s,
open: false,
}));
} }
}, },
}); });
const columns = useMemo(() => { const columns = useMemo(() => {
let defcolumn = getcolumns(setdrawer)?.columns; let defcolumn = getcolumns()?.columns;
return defcolumn; return defcolumn;
}, [activeTabKey]); }, []);
const pathconfig = useMemo(() => {
let defpath = getcolumns()?.pathconfig ?? {};
return defpath;
}, [activeTabKey]);
return ( return (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
...@@ -200,33 +195,6 @@ function Home(props) { ...@@ -200,33 +195,6 @@ function Home(props) {
> >
<Cards /> <Cards />
</AutoTable> </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> </div>
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment