From 0899d4bb79b46e2e9af6458984bd0c94610d1226 Mon Sep 17 00:00:00 2001 From: skycurtain Date: Mon, 11 Aug 2025 20:12:16 +0800 Subject: [PATCH] some updates --- src/apis/client.ts | 4 ++ src/apis/domains/index.ts | 1 + src/apis/domains/station.ts | 7 +++ src/apis/models/devices/video/ndm-keyboard.ts | 1 - src/components/dashboard/station/index.tsx | 43 +++++++++++++++ src/contants/index.ts | 4 ++ src/layouts/app-layout.tsx | 27 ++++++++-- src/routes/_app.tsx | 4 +- src/routes/_app/dashboard.tsx | 54 ++++++++++++++++++- src/routes/login.tsx | 37 ++++++++++++- src/store/station.ts | 17 ++++++ 11 files changed, 188 insertions(+), 11 deletions(-) create mode 100644 src/apis/client.ts create mode 100644 src/apis/domains/index.ts create mode 100644 src/apis/domains/station.ts create mode 100644 src/components/dashboard/station/index.tsx create mode 100644 src/contants/index.ts create mode 100644 src/store/station.ts diff --git a/src/apis/client.ts b/src/apis/client.ts new file mode 100644 index 0000000..62e0e70 --- /dev/null +++ b/src/apis/client.ts @@ -0,0 +1,4 @@ +import { Request } from '@/utils/request'; + +export const ndmClient = new Request(); +export const userClient = new Request(); diff --git a/src/apis/domains/index.ts b/src/apis/domains/index.ts new file mode 100644 index 0000000..3d5dbf6 --- /dev/null +++ b/src/apis/domains/index.ts @@ -0,0 +1 @@ +export * from './station'; diff --git a/src/apis/domains/station.ts b/src/apis/domains/station.ts new file mode 100644 index 0000000..1860aa9 --- /dev/null +++ b/src/apis/domains/station.ts @@ -0,0 +1,7 @@ +export interface Station { + id: string; + code: string; + name: string; +} + +export type StationStatusRecord = Record; diff --git a/src/apis/models/devices/video/ndm-keyboard.ts b/src/apis/models/devices/video/ndm-keyboard.ts index 2c28590..af20b96 100644 --- a/src/apis/models/devices/video/ndm-keyboard.ts +++ b/src/apis/models/devices/video/ndm-keyboard.ts @@ -2,7 +2,6 @@ import type { BaseModel } from '../../base/model'; import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../base/reduce'; export interface NdmKeyboardVO extends BaseModel { - deviceId: string; name: string; manufacturer: string; diff --git a/src/components/dashboard/station/index.tsx b/src/components/dashboard/station/index.tsx new file mode 100644 index 0000000..3e8d313 --- /dev/null +++ b/src/components/dashboard/station/index.tsx @@ -0,0 +1,43 @@ +import type { FC } from 'react'; + +import { AlertOutlined, ApiOutlined } from '@ant-design/icons'; +import { Card, Col, Row, Statistic, Tag } from 'antd'; + +interface StationProps { + name: string; + online: boolean; + offlineDeviceCount: number; + alarmCount: number; +} + +export const Station: FC = ({ name, online, offlineDeviceCount, alarmCount }) => { + return ( + 7 ? { fontSize: '12px' } : {} }} + extra={{online ? '在线' : '离线'}} + > + {online && ( + + + 离线设备} + value={offlineDeviceCount} + prefix={} + valueStyle={{ color: offlineDeviceCount > 0 ? '#cf1322' : undefined }} + /> + + + 告警记录} + value={alarmCount} + prefix={} + valueStyle={{ color: alarmCount > 0 ? '#faad14' : undefined }} + /> + + + )} + + ); +}; diff --git a/src/contants/index.ts b/src/contants/index.ts new file mode 100644 index 0000000..7ef9a58 --- /dev/null +++ b/src/contants/index.ts @@ -0,0 +1,4 @@ +export const JAVA_INTEGER_MAX_VALUE = 2147483647; +export const JAVA_UNSIGNED_INTEGER_MAX_VALUE = 4294967295; + +export const NDM_SWITCH_PROBE_INTERVAL = 5; diff --git a/src/layouts/app-layout.tsx b/src/layouts/app-layout.tsx index cb57632..0a7e7e8 100644 --- a/src/layouts/app-layout.tsx +++ b/src/layouts/app-layout.tsx @@ -1,9 +1,9 @@ -import type { MenuTheme } from 'antd'; +import type { MenuProps, MenuTheme } from 'antd'; import type { FC } from 'react'; -import { AlertFilled, AreaChartOutlined, FileTextFilled, HomeFilled, VideoCameraFilled } from '@ant-design/icons'; +import { AlertFilled, AreaChartOutlined, DownOutlined, FileTextFilled, HomeFilled, UserOutlined, VideoCameraFilled } from '@ant-design/icons'; import { Link, Outlet } from '@tanstack/react-router'; -import { Layout, Menu, theme } from 'antd'; +import { Avatar, Dropdown, Layout, Menu, Space, theme } from 'antd'; import { useState } from 'react'; const { Content, Footer, Header, Sider } = Layout; @@ -12,10 +12,27 @@ export const AppLayout: FC = () => { const { token: { colorBgContainer } } = theme.useToken(); const [menuTheme] = useState('light'); + const items: MenuProps['items'] = [ + { + key: 'logout', + label: ( + + 退出登录 + + ), + }, + ]; + return ( - -
+ +

网络设备管理平台

+ + + Admin + + +
diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx index d2a0d97..c50dd08 100644 --- a/src/routes/_app.tsx +++ b/src/routes/_app.tsx @@ -1,7 +1,9 @@ import { createFileRoute } from '@tanstack/react-router'; -import { AppLayout } from '../layouts/app-layout'; +import { AppLayout } from '@/layouts/app-layout'; export const Route = createFileRoute('/_app')({ + // TODO: 登录校验 + beforeLoad: async () => {}, component: AppLayout, }); diff --git a/src/routes/_app/dashboard.tsx b/src/routes/_app/dashboard.tsx index 04c69fc..be2b86b 100644 --- a/src/routes/_app/dashboard.tsx +++ b/src/routes/_app/dashboard.tsx @@ -1,9 +1,59 @@ -import { createFileRoute } from '@tanstack/react-router'; +import { useQuery } from '@tanstack/react-query'; +import { createFileRoute, useLocation } from '@tanstack/react-router'; +import { Col, Row } from 'antd'; + +import { userClient } from '@/apis/client'; +import { Station } from '@/components/dashboard/station'; export const Route = createFileRoute('/_app/dashboard')({ component: DashboardPage, }); function DashboardPage() { - return
Hello from "/_app/dashboard"!
; + // const location = useLocation(); + // const { data, isLoading, isFetching, isPending } = useQuery({ + // queryKey: ['station'], + // queryFn: async () => { + // const [err, , resp] = await userClient.get('/api/users'); + // if (err || !resp) { + // throw err; + // } + // console.log(resp); + // return resp; + // }, + // }); + + const stations = Array.from({ length: 40 }).map((_, i) => ({ + id: i, + name: `测试站点${i + 1}`, + isOnline: true, + offlineDeviceCount: 12, + alarmCount: 3, + })); + + return ( + //
+ // + //
+ //

当前路由信息

+ // 
{JSON.stringify(location, null, 2)}
+ //
+ + // 
{JSON.stringify(data, null, 2)}
+ //
+
+ + {stations.map(station => ( + + + + ))} + +
+ ); } diff --git a/src/routes/login.tsx b/src/routes/login.tsx index d766d59..4cdf063 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -1,4 +1,6 @@ +import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { createFileRoute } from '@tanstack/react-router'; +import { Button, Card, Form, Input, Typography } from 'antd'; export const Route = createFileRoute('/login')({ component: LoginPage, @@ -6,8 +8,39 @@ export const Route = createFileRoute('/login')({ function LoginPage() { return ( -
-

登录页面

+
+ +
+ 网络设备管理平台 +
+
+ + } placeholder='用户名' /> + + + } + type='password' + placeholder='密码' + /> + + + + + +
+
); } diff --git a/src/store/station.ts b/src/store/station.ts new file mode 100644 index 0000000..cb9b261 --- /dev/null +++ b/src/store/station.ts @@ -0,0 +1,17 @@ +import { create } from 'zustand'; + +import type { Station, StationStatusRecord } from '@/apis/domains'; + +export interface StationState { + stationList: Station[]; + stationStatusRecord: StationStatusRecord; + setStationList: (stationList: Station[]) => void; + setStationStatusRecord: (stationStatusRecord: StationStatusRecord) => void; +} + +export const useStationStore = create(set => ({ + stationList: [], + stationStatusRecord: {}, + setStationList: (stationList: Station[]) => set({ stationList }), + setStationStatusRecord: (stationStatusRecord: StationStatusRecord) => set({ stationStatusRecord }), +}));